Recreating Atmos 3D Website with React Three Fiber: Part 2 - Environment Map
Let's try to reproduce the Atmos website using threejs and React Three Fiber.
In this second part, we will:
Add set the lighting effects with the Environment component from Drei (cubeMap/envMap)
Fix our curve scroll / rotation
Add 2D text in our 3D scene
At this point, we finished the setup phase of this project. It starts looking good and all the things we will do in the next part will make it look incredible!
Get the starter pack here 🔗
https://github.com/wass08/r3f-wawatmo...
#threejs #r3f #react
▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬
My complete course to learn React Three Fiber
https://lessons.wawasensei.dev/
Demo
https://codesandbox.io/p/github/wass0...
Final source code
https://github.com/wass08/r3f-wawatmo...
Text
https://github.com/pmndrs/drei#text
Environment
https://github.com/pmndrs/drei#enviro...
Cubemap
https://threejs.org/examples/?q=cubem...
Original Atmos Website
https://atmos.leeroy.ca/
React Three Fiber documentation
https://docs.pmnd.rs/react-three-fibe...
R3F Drei
https://github.com/pmndrs/drei
Models
https://poly.pizza/
Three.js Journey.
https://threejs-journey.com/
I also have a discount code just for you to get -20%
https://threejs-journey.xyz/join/wawa...
▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬
00:00 - Intro
00:26 - Adding text to the scene
01:33 - Minor adjustments
01:55 - Better curve, scroll & rotation
05:33 - Scene lighting envMap
07:18 - Part 2 progression
07:40 - Coming next
▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬
Become a member to get access to awesome perks:
/ @wawasensei
▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬
💻 The Discord Community
/ discord
📸 Instagram :
/ wawa.sensei
🎎 Facebook :
/ wawasenseiyt
🐦Twitter :
/ wawasensei
🐦TikTok :
/ wawasensei08
💻 My website :
https://www.wawasensei.dev
Watch video Recreating Atmos 3D Website with React Three Fiber: Part 2 - Environment Map online without registration, duration hours minute second in high quality. This video was added by user Wawa Sensei 31 March 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 6,062 once and liked it 176 people.