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

Published: 10 April 2023
on channel: 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

Watch video Recreating Atmos 3D Website with React Three Fiber: Part 3 - Effects online without registration, duration hours minute second in high quality. This video was added by user Wawa Sensei 10 April 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 4,407 once and liked it 133 people.