Back to videos

Recreating Atmos 3D Website with React Three Fiber: Part 2 - Environment Map

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 the first part of this tutorial, we established the foundation of our Atmos website recreation by setting up a curved path, adding an airplane model, and implementing a basic scrolling effect. Now, it's time to take things a step further by refining the visuals and making the scene more immersive.

In this second part, we will:

• Implement lighting effects using the Environment component from Drei.

• Improve our curve scroll and rotation system.

• Integrate 2D text into our 3D scene.

Making 3D Websites More Engaging

A well-designed 3D website should not only look good but also feel responsive and natural to interact with. Without proper lighting, objects may appear flat, and without smooth scrolling, navigation can feel unnatural. This tutorial will show you how to refine these aspects to create a more polished user experience.

Insights and Skills

In this tutorial, you’ll learn:

• How to use different lighting techniques to enhance the scene.

• Fine-tuning the scrolling effect for smoother movement.

• Adjusting camera behavior to create a more immersive feel.

• Integrating 3D text into the scene using Drei’s Text component.

• Optimizing performance to keep interactions smooth.

Tech Stack

• React Three Fiber

• Three.js

• Lamina

• CatmullRomCurve3

Demo & Code link

• Demo 🔗

• Starter Pack 🔗

• Final code 🔗

Resources

• Models

• Text

• Environment

• Cubemap

• Original Atmos Website

• React Three Fiber documentation

• R3F Drei

#threejs #react #r3f

Need help with this tutorial? Join our Discord community!