Typorithm · medium

Three.js Scene

three-scenereactthreejsscenemesh

Saved on this device

Full lesson · 8 learning steps Open any exercise for focused practice

Step 1 of 8 · intro card

Learn Three.js Scene

Three.js & R3F

A raw Three.js app needs a Scene (the world), a Camera (the viewpoint), and a WebGLRenderer (draws to a canvas). A Mesh pairs a geometry with a material, and objects must be added to the scene to render. This is the imperative API.

Three.js is a WebGL library. The three core pieces are a Scene that holds everything, a Camera that defines the viewpoint, and a WebGLRenderer that draws the scene from the camera onto a canvas.

A Mesh is geometry plus material: BoxGeometry gives it a cube shape and MeshStandardMaterial gives it a surface that reacts to light. The PerspectiveCamera args are fov, aspect, near, and far.

Nothing appears until you call scene.add(cube) — only objects in the scene graph are rendered. This raw, imperative API is what react-three-fiber wraps in declarative JSX.

Scene + Camera + WebGLRenderer are the core trio.

A Mesh = geometry + material.

Objects render only after scene.add().

import * as THREE from "three";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, 2, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
const cube = new THREE.Mesh(
  new THREE.BoxGeometry(),
  new THREE.MeshStandardMaterial({ color: "orange" }),
);
scene.add(cube);

Read the implementation

Connect each part of the code to the concept before you type.

1. The scene

A Scene is the world container — every object you want rendered must be added to it.

const scene = new THREE.Scene();

2. The camera

PerspectiveCamera's args are fov, aspect, near, and far — the viewpoint and visible depth range.

const camera = new THREE.PerspectiveCamera(75, 2, 0.1, 1000);

3. The renderer

WebGLRenderer draws the scene from the camera's view onto a canvas using WebGL.

const renderer = new THREE.WebGLRenderer();

4. A mesh

A Mesh combines a geometry (shape) and a material (surface) into a renderable object.

const cube = new THREE.Mesh(

5. Add to scene

Objects only render once added to the scene graph with scene.add().

scene.add(cube);

A complete learning loop

Understand

Read the concept map and follow the code breakdown.

Reconstruct

Type the implementation, repair mistakes and work through every recall exercise.

Verify

Use the final check without hints; revisit weak concepts in short practice sessions.