How to Make a 3D Glass Effect using Three.js and Next.js

A website tutorial on how to create a Glass looking Material with distortion by using the MeshTransmissionMaterial with Three.js, React, React Three Fiber and Next.js.

Source Code / Live demo:
https://blog.olivierlarose.com/tutori...

00:00 Intro
00:19 Asset Preparation
3:01 Rendering the Canvas
5:16 Rendering the mesh
6:47 Adding lights
8:25 Adding responsiveness
8:49 Rotating the mesh
9:33 Adding the text
11:14 Adding the Transmission Material
13:30 Outro

More animations: https://blog.olivierlarose.com/
Follow me on Twitter:   / olivierlarose_  
Discord Channel:   / discord  

Thanks for watching!

#react #nextjs #awwwards #gsap #framer #motion