Recreating Atmos 3D Website with React Three Fiber: Part 1 - Curved Path

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

34,802

858

Let's try to reproduce the Atmos website using threejs and React Three Fiber.
In this first part, we will build the foundation to reproduce this beautiful 3D website.
We'll prepare our plane, clouds, and the curved line representing the path the plane follows while scrolling.
At this point, the end result won't look quite close to the final result, but we need to start there and iterate to gradually make our project looking good and professional!

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...

Models
https://poly.pizza/

Lamina library documentation
https://github.com/pmndrs/lamina

CatmullRomCurve3
https://threejs.org/docs/#api/en/extr...

ExtrudeGeometry
https://threejs.org/docs/?q=extru#api...

React Three Fiber documentation
https://docs.pmnd.rs/react-three-fibe...

R3F Drei
https://github.com/pmndrs/drei

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 - Final goal
01:18 - Setup
01:28 - Background
02:19 - Plane & Clouds
03:31 - Curve
04:57 - Scroll movement
06:57 - First part progression

▬▬▬▬▬▬ 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 1 - Curved Path онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Wawa Sensei 24 Март 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 34,802 раз и оно понравилось 858 людям.

194