Visual Experience using React Three Fiber

live website

github

Tech Stack: React, Three.js, React Three Fiber, GSAP, Vite
In this project, I built an interactive 3D animation using React and Three.js. To connect the Three.js 3D content to React, I used the React Three Fiber library which provides React bindings for Three.js.

The main feature is an animated airplane model with moving rudders. To achieve the animation, I used the GreenSock Animation Platform (GSAP) and its ScrollTrigger plugin to link the airplane's motion to the page scroll. As the user scrolls, the airplane follows a curvy path through clouds in the scene.

The cloud models add depth and atmosphere to the scene. For the sky, I used a gradient background from the lamina gradient library.

I bundled everything together using Vite, which provides fast development builds. The end result is a performant, smooth 3D animation synced to user scrolling. React Three Fiber allowed me to integrate Three.js 3D content seamlessly into React components. Overall, this project demonstrates how to combine React, Three.js, GSAP, and other libraries to create an interactive and visually appealing 3D experience.