Water Reflection using
Demo✨ https://robpayot.github.io/htct-refle...
Template 🎓 https://github.com/Robpayot/vite-thre...
Full code access / support 🙏🏻 https://www.patreon.com/user?u=50160165
...
In this video we will learn how to make water reflection in Three.js. We'll see how we can reflect a scene like a mirror and we'll add displace to recreate water flowing.
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/
Learn Threejs: https://threejs.org/docs/index.html#m...
More Threejs example: https://threejs.org/examples/?q=refl#...
Music license owner: Insomnie Prod.
Chapters:
00:00 Intro
01:36 Begin the exercise
05:06 Add background and lights
12:38 Mirror Reflection
39:50 Water displacement shader
54:25 Add stars
1:00:50 Final Result
#threejs #tutorial #3d #water #javascript #reflection
