Refraction in
Demo✨ https://robpayot.github.io/htct-refra...
Template 🎓 https://github.com/Robpayot/vite-thre...
Full code access (including all other tutorials) / support 🙏🏻 https://www.patreon.com/user?u=50160165
...
In this video we will learn how to create refraction materials on different shapes using the Three.js library.
To do this tutorial you will need to download the template above and follow
the instructions, good luck!
If you finished the exercise feel free to send your creations in the
comments, I'd be happy to see what you guys are capable of!
...
Hi my name is Robin Payot, I'm a french creative developer making WebGL
websites since 2015, I'm also jury FWA since 2016 and I'm still working
as a freelancer. I've been working with many awarded agencies all over
the world and I'm here to share with you everything I've learned back
then.
You can support me and get a direct access to the code by subscribing to
my patreon ( https://www.patreon.com/user?u=50160165 ), supporting will also give me more time to make new videos!
Thanks!
Other useful links: 📖
Threejs: https://threejs.org/
MeshPhysicalMaterial: https://threejs.org/docs/?q=Mesh#api/...
Normal maps (and more): https://3dtextures.me/
Custom shader by Jasper Vos: https://tympanus.net/codrops/2019/10/...
Music license Epidemic Sound.
Chapters:
00:00 Intro
01:40 Reel
01:50 Begin the exercice
04:24 Add a Background
07:48 MeshPhysicalMaterial
12:02 Transmission
13:28 Roughness
15:24 Thickness
16:58 Add more objects in the scene
33:58 HDR envmap
39:48 Normal
44:33 Clearcoat map
45:45 Final result
46:23 Outro / Custom Shader Refraction
#threejs #tutorial #3d #refraction #javascript
