How I Built a Cinematic 3D Fitness Website with React Three Fiber and Three.js

Building a Cinematic 3D Fitness Website with React Three Fiber and Three.js

Modern fitness websites don't have to look like a simple collection of cards, buttons, and text.

While building my fitness platform ASFORGE FITNESS, I wanted the website to feel more like an interactive experience. The main goal was to combine a fitness platform with a cinematic 3D interface, animated characters, glowing effects, and an AI fitness coach.

In this article, I'll share how I built the 3D experience using React, Vite, React Three Fiber, Three.js, and Drei.

---

🚀 What I Wanted to Build

The idea was to create a fitness website with:

• A cinematic hero section
• An interactive 3D character
• Character animations
• Animated background effects
• Stars and particles
• Energy rings and glow effects
• AI fitness coach integration
• Workout and diet sections
• Membership plans
• A modern responsive interface

Instead of making the 3D scene a completely separate application, I wanted it to work naturally inside a normal React website.

---

🛠️ Tech Stack

The main technologies I used were:

• React
• Vite
• JavaScript
• Three.js
• React Three Fiber
• Drei
• React Three Postprocessing
• GLB 3D models
• Gemini AI

The normal website UI is built with React, while React Three Fiber is responsible for rendering the 3D experience.

---

⚛️ Why React Three Fiber?

Three.js is extremely powerful for creating 3D experiences on the web.

However, when working inside a React application, managing Three.js scenes directly can become difficult.

React Three Fiber provides a React-based way to work with Three.js.

Instead of manually creating and managing everything with traditional Three.js code, I could structure the 3D scene using React components.

For example:

jsx
<Canvas>
  <ambientLight />
  <directionalLight position={[2, 4, 5]} />

  <HeroCharacter />

  <Stars />
</Canvas>

This made it much easier to keep the 3D scene organized as part of the React application.

🧍 Adding a 3D Character

One of the most important parts of the hero section was the 3D character.

I used a .glb model and loaded it with Drei's useGLTF.

A simplified version looks like this:

import { useGLTF } from "@react-three/drei";

function HeroCharacter() {
  const { scene } = useGLTF("/models/character.glb");

  return (
    <primitive
      object={scene}
      scale={1}
      position={[0, -1, 0]}
    />
  );
}

The model is then placed inside the React Three Fiber canvas.

The important part was not simply loading the model.

The real challenge was getting the scale, camera position, and character position right.

📷 Camera Position Matters

A 3D model can look completely different depending on the camera.

Initially, my character was either too large, too small, or partially outside the screen.

I experimented with camera settings such as:

<Canvas
  camera={{
    position: [0, 0.5, 6],
    fov: 40,
  }}
>

I then adjusted the character's scale and position until the model stayed inside the hero section while still looking large and cinematic.

This was one of the most important parts of creating the final composition.

🎬 Playing the Character Animation

The 3D model also needed to feel alive.

For animated GLB models, I used Drei's animation support with useAnimations.

A simplified example:

import { useEffect } from "react";
import { useAnimations, useGLTF } from "@react-three/drei";

function AnimatedCharacter() {
  const { scene, animations } = useGLTF(
    "/models/character.glb"
  );

  const { actions } = useAnimations(
    animations,
    scene
  );

  useEffect(() => {
    const animation = Object.values(actions)[0];

    if (animation) {
      animation.reset().fadeIn(0.5).play();
    }

    return () => {
      if (animation) {
        animation.fadeOut(0.5);
      }
    };
  }, [actions]);

  return <primitive object={scene} />;
}

This allowed the model's built-in animation to play inside the website.

✨ Creating the Cinematic Environment

A plain 3D model wasn't enough.

I wanted the scene to feel energetic and connected to the fitness theme.

So I combined several visual effects:

Stars
Particles
Glowing rings
Background effects
Energy effects
Lighting
Bloom
Animated elements

The result was much more dynamic than simply placing a model on a static background.

🌌 Stars and Particles

For the background, I used Drei's Stars component.

For example:

<Stars
  radius={80}
  depth={50}
  count={3000}
  factor={4}
  saturation={0}
  fade
  speed={1}
/>

This gives the background a subtle space-like environment.

I also experimented with additional particle effects to make the scene feel more alive.

💡 Lighting

Lighting makes a huge difference in 3D.

I used multiple light sources instead of relying on only one light.

For example:

<ambientLight intensity={0.5} />

<directionalLight
  position={[3, 5, 2]}
  intensity={2}
/>

The goal was to make the character clearly visible while maintaining a dramatic look.

🌟 Bloom and Glow

To make bright elements feel more cinematic, I used post-processing.

The setup included:

<EffectComposer>
  <Bloom
    intensity={1.2}
    luminanceThreshold={0.2}
    luminanceSmoothing={0.9}
  />
</EffectComposer>

Bloom helped create the glowing appearance around bright objects and energy effects.

This was especially useful for the rings, particles, and other bright elements in the scene.

🔄 Keeping the Scene Animated

A static 3D scene can quickly feel boring.

React Three Fiber provides useFrame, which can be used to update objects on every rendered frame.

For example:

useFrame((state, delta) => {
  mesh.rotation.y += delta * 0.3;
});

This can be used for:

Rotation
Floating effects
Animated rings
Particle movement
Camera effects
Other continuous animations

I used this approach to make different parts of the hero scene feel dynamic.

🧩 Integrating 3D with a Normal React UI

One of the interesting parts of this project was combining a traditional website UI with the 3D scene.

The page still contains normal React elements such as:

Navigation
Buttons
Text
Fitness plans
Workout sections
AI Coach section
Contact forms

The 3D scene is placed inside the hero section rather than replacing the entire website.

Conceptually, the structure looks like:

React Application
│
├── Navigation
│
├── Hero Section
│   ├── Text Content
│   ├── CTA Buttons
│   └── React Three Fiber Scene
│       ├── 3D Character
│       ├── Lights
│       ├── Stars
│       ├── Particles
│       ├── Energy Effects
│       └── Post Processing
│
├── AI Coach
├── Workout Sections
├── Membership
└── Contact

This structure made it possible to use 3D where it actually adds value instead of turning the whole website into a 3D application.

🤖 Connecting the 3D Experience with an AI Fitness Coach

The 3D hero was only one part of the project.

The website also includes an AI fitness coach powered by Gemini.

The AI Coach provides trainer-style interaction while the 3D scene creates the visual identity of the platform.

This combination gives the website two different experiences:

Visual experience:

3D character + animations + cinematic effects

Interactive experience:

AI fitness coach + conversations + fitness guidance

🌍 Multilingual AI Coach

Another part of the project is multilingual support.

The AI Coach can work with a large number of languages, allowing users to interact with the fitness platform beyond a single language.

This became especially useful for the idea of making the platform accessible to users from different backgrounds.

The language handling is kept separate from the 3D rendering system, so the two systems can evolve independently.

🐛 Some Challenges I Faced

Building the 3D section wasn't completely straightforward.

1. Model going outside the screen

The first challenge was positioning the character correctly.

Changing the scale also changed how large the character appeared relative to the camera.

I had to balance:

Camera position
+
Field of view
+
Model scale
+
Model position

until the character looked good on the screen.

2. Animation setup

A GLB model may contain one or multiple animations.

So I had to load the animation clips and start the appropriate action instead of assuming the model would automatically animate.

3. Too many visual effects

Adding more effects does not always make a scene better.

Too many particles, lights, or post-processing effects can make the scene visually noisy and can also increase rendering work.

I therefore treated the effects as supporting elements rather than the main focus.

4. React and Three.js integration

Another challenge was keeping the 3D components modular.

Instead of putting everything into one large component, I separated different responsibilities into components such as:

HeroScene
Character
Energy Effects
Particles
Rings
Lighting

This made the project easier to modify.

📱 Making the Experience Fit the Website

The 3D scene also had to work with the rest of the website.

A cinematic desktop layout can easily break on smaller screens.

So the scene needs to be considered together with:

Hero text
Buttons
Navigation
Screen size
Character scale
Camera position

The goal is not just to make the 3D scene look good on one screen, but to make the overall hero section usable.

🚀 What I Learned

This project taught me that adding 3D to a website is not just about creating a cool model.

The important parts are:

Composition
Camera positioning
Lighting
Animation
Performance
UI integration
Responsive design

React Three Fiber made the process much easier because I could build the 3D experience using a React component structure.

🔮 What's Next?

The ASFORGE FITNESS project is still evolving.

Some of the areas I want to continue improving include:

Better 3D interactions
More fitness-focused animations
Improved mobile performance
More AI features
Better workout personalization
More interactive exercise demonstrations

The long-term goal is to bring the same experience to a mobile application as well.

🏁 Final Thoughts

Building a cinematic 3D website showed me how much difference visual interaction can make when it is combined with a useful product.

Instead of using 3D only as decoration, I wanted it to become part of the identity of the fitness platform.

The combination of React + React Three Fiber + Three.js + AI gave me a strong foundation for experimenting with interactive web experiences.

I'm continuing to improve ASFORGE FITNESS and explore how AI and 3D can work together to create better fitness experiences.

🔗 Technologies Used

Frontend: React, Vite, JavaScript

3D: Three.js, React Three Fiber, Drei

3D Assets: GLB models and animations

Effects: React Three Postprocessing, Bloom, particles and lighting

AI: Gemini

If you're also experimenting with React Three Fiber, I'd love to hear what kind of 3D experiences you're building.

#react #threejs #javascript #webdev