Recreating Atmos 3D Website with React Three Fiber: Part 2 - Environment Map

Опубликовано: 31 Март 2023
на канале: Wawa Sensei

6,062

176

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

Смотрите видео Recreating Atmos 3D Website with React Three Fiber: Part 2 - Environment Map онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Wawa Sensei 31 Март 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 6,062 раз и оно понравилось 176 людям.

105