Back to videos

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

Overview

Creating a stunning 3D website requires careful planning and iteration. In this multi-part tutorial, we will work on recreating the Atmos website using Three.js and React Three Fiber.

In this first part, we will establish the foundation, preparing essential elements such as the background, airplane, clouds, and a curved path that the airplane will follow as the user scrolls.

Beginner-Friendly Approach

If you've ever wanted to bring interactive 3D elements to a website but felt overwhelmed by the complexity, this tutorial is for you. We'll break down the process step by step, ensuring you understand not just how to implement 3D features but also why they work. With React Three Fiber and Three.js, you’ll learn how to build visually rich, performant 3D experiences.

Insights and Skills

In this tutorial, you’ll learn:

• Setting up a Three.js and React Three Fiber project.

• Creating a dynamic background with the Lamina library.

• Importing and rendering 3D models such as an airplane and clouds.

• Using CatmullRomCurve3 to generate a curved path.

• Implementing a scrolling effect that moves objects along a predefined path.

• Adjusting camera settings to follow the curve smoothly.

• Applying basic animations to enhance realism.

Tech Stack

• React Three Fiber

• Three.js

• Lamina

• CatmullRomCurve3

• ExtrudeGeometry

Demo & Code link

• Demo 🔗

• Starter Pack 🔗

• Final code 🔗

Resources

• Models

• Lamina library documentation

• CatmullRomCurve3

• ExtrudeGeometry

• React Three Fiber documentation

• R3F Drei

#threejs #react #r3f

Need help with this tutorial? Join our Discord community!