Recreating Atmos 3D Website with React Three Fiber: Part 3 - Effects

Опубликовано: 10 Апрель 2023
на канале: Wawa Sensei

4,407

133

Let's continue to reproduce the Atmos website using threejs and React Three Fiber.
In this third part, we will:
Set the final text sections
Animate the camera and slow the movement speed when we're close to text sections
Add gradient colors animations with GSAP
Set the final clouds
Add fading effect on clouds, texts and the curve
Add noise postprocessing effect

At this point, we finished the 3D part of the project. Next week we will add the loader, UI and enhance the responsive.

Get the starter pack here 🔗
https://github.com/wass08/r3f-wawatmo...

#threejs #r3f #react

▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬

Demo
https://codesandbox.io/p/github/wass0...

Final source code
https://github.com/wass08/r3f-wawatmo...

Original Atmos Website
https://atmos.leeroy.ca/

GSAP
https://greensock.com/docs/v3/GSAP

The book of shaders
https://thebookofshaders.com/

Shader exponential function
http://www.flong.com/archive/texts/co...

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:40 - Final texts
02:10 - Text rail animation
03:35 - Retime effect
04:58 - Gradient animation
06:36 - Final clouds
07:46 - Fade effects
09:53 - Noise
10:03 - Final result
10:49 - What's 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 3 - Effects онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Wawa Sensei 10 Апрель 2023, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 4,407 раз и оно понравилось 133 людям.

194