Introduction to Three.js with React-Three-Fiber

Three.js is a powerful JavaScript library used to create and display 3D graphics in the browser. It leverages WebGL, a low-level API for rendering 3D and 2D graphics, to deliver stunning visuals and interactive experiences. React-Three-Fiber, built on top of Three.js, provides a declarative way to work with Three.js in React applications.

What is React-Three-Fiber?

React-Three-Fiber is a React renderer for Three.js. It allows developers to build 3D scenes using React components, making the creation and management of complex 3D graphics more intuitive. By leveraging React's component-based architecture, React-Three-Fiber simplifies the process of integrating Three.js into modern web applications.

Why Use React-Three-Fiber?

  • Declarative Syntax: Simplifies the creation of 3D scenes with React components.
  • React Integration: Leverages React's state and props to dynamically control 3D objects.
  • Reusable Components: Allows developers to reuse 3D elements across applications.
  • Easier State Management: Combines Three.js capabilities with React's state management tools.

How Three.js Works: Building Blocks and Flow

Understanding the core building blocks of Three.js is crucial for creating 3D scenes effectively. Here's a detailed flow of how Three.js works:

1. Scene

The Scene serves as a container for all objects, lights, and cameras in your 3D environment. It organizes everything you want to render.

const scene = new THREE.Scene();

2. Camera

The Camera determines what part of the scene is visible to the user. The most commonly used camera types are:

  • PerspectiveCamera: Mimics how the human eye perceives the world, providing depth.
  • OrthographicCamera: Renders objects without perspective distortion, useful for 2D views.
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

3. Renderer

The Renderer is responsible for rendering the scene from the perspective of the camera. It translates the 3D scene into 2D pixels on the screen.

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

4. Geometry

Geometry defines the shape of 3D objects. Three.js provides various built-in geometries such as:

  • BoxGeometry (cubes)
  • SphereGeometry (spheres)
  • PlaneGeometry (planes)
const geometry = new THREE.BoxGeometry(1, 1, 1);

5. Material

Material defines the appearance of the geometry, including its color, texture, and how it interacts with light.

const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });

6. Mesh

A Mesh combines geometry and material to create a 3D object that can be added to the scene.

const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

7. Lighting

Lighting enhances the realism of the scene by simulating light sources. Common types include:

  • AmbientLight: Provides global illumination.
  • PointLight: Emits light from a specific point in all directions.
  • DirectionalLight: Mimics sunlight with parallel light rays.
const light = new THREE.AmbientLight(0x404040); // Soft white light
scene.add(light);

8. Animation Loop

The Animation Loop continuously updates and renders the scene to create animations.

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

Summary of the Flow

  1. Create a Scene.
  2. Add a Camera to define the viewpoint.
  3. Set up a Renderer to draw the scene.
  4. Define Geometry for 3D objects.
  5. Apply Material to control the object's appearance.
  6. Combine geometry and material into a Mesh.
  7. Add Lighting to the scene.
  8. Use an Animation Loop to update and render the scene continuously.

Getting Started

Installation

To get started, install React-Three-Fiber and Three.js using npm or yarn:

npm install @react-three/fiber three @types/three

Canvas

The Canvas component from React-Three-Fiber serves as the root for your 3D scene, similar to a div for HTML or a svg for vector graphics.

import { Canvas } from '@react-three/fiber';

function App() {
  return (
    <Canvas>
      {/* 3D components go here */}
    </Canvas>
  );
}

Meshes

Meshes are the building blocks of 3D objects. They consist of geometry (shape) and material (appearance).

import { Canvas } from '@react-three/fiber';

function Box() {
  return (
    <mesh>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="orange" />
    </mesh>
  );
}

function App() {
  return (
    <Canvas>
      <Box />
    </Canvas>
  );
}

Lighting

Lighting is essential for enhancing the visual appearance of 3D scenes.

import { Canvas } from '@react-three/fiber';

function App() {
  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <directionalLight position={[0, 10, 5]} intensity={1} />
      {/* Other 3D components */}
    </Canvas>
  );
}

Animations

React-Three-Fiber supports animations using the useFrame hook.

import { Canvas, useFrame } from '@react-three/fiber';
import { useRef } from 'react';

function RotatingBox() {
  const meshRef = useRef();

  useFrame(() => {
    meshRef.current.rotation.x += 0.01;
    meshRef.current.rotation.y += 0.01;
  });

  return (
    <mesh ref={meshRef}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="blue" />
    </mesh>
  );
}

function App() {
  return (
    <Canvas>
      <RotatingBox />
    </Canvas>
  );
}

Resources