Three.js Basics: Setting Up Scene, Camera, Renderer, and Simple Animations

Preface

In the previous article we created a 3D heart‑jumping effect with Three.js but did not explain the library’s core concepts. This article uses a photography story to introduce Three.js basics and open the door to 3D development.

Story Background

As autumn turns cold, the author likens the process of learning Three.js to preparing a photo shoot: selecting a scene, a camera, and a photographer (the library itself) to capture the perfect shot.

Photography Preparation | Three.js Three Essentials

Step 1: Scene – In Three.js a scene is the 3D container that holds all objects.

const scene = new Three.Scene();

Step 2: Camera – The camera defines the view frustum. Three.js provides perspective and orthographic cameras; here we use a perspective camera.

const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(0, 2, 4);
camera.lookAt(0, 0, 0);
scene.add(camera);

Step 3: Renderer – The renderer draws the scene onto a canvas using WebGL.

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

Shooting Begins

In Three.js a model represents any 3D object. Models consist of geometry (the shape) and material (the appearance).

Model

Three.js offers many geometry and material APIs for building objects.

Case 1: Cube

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: "#ff0000" });
const cube = new THREE.Mesh(geometry, material);
cube.position.set(1, 0, 0);
scene.add(cube);

Case 2: External Model

External models are usually loaded in glTF format for efficient runtime rendering.

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
const loader = new GLTFLoader();
loader.load("/model/boxer.glb", (model) => {
  scene.add(model.scene);
});

Orbit Controls

The OrbitControls component lets the camera orbit around a target, enabling interactive navigation.

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
const controls = new OrbitControls(camera, renderer.domElement);
controls.update();

Model Animation

Animations are created by updating object properties each frame, typically inside a requestAnimationFrame loop.

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

For more complex scenes with multiple models, GSAP can be used to coordinate animations.

gsap.to(cube.position, { x: 2, duration: 10 });
gsap.to(model.rotation, { y: Math.PI, duration: 10 });

Responsive

The renderer and camera must adapt when the canvas size changes, similar to an auto‑focus feature.

window.addEventListener("resize", () => {
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
});

Summary

The article walks through the basic Three.js workflow: define a scene, set up a perspective camera, create a WebGL renderer, add a model (either primitive or glTF), enable orbit controls, make the scene responsive, and apply simple animations.

Afterword

The author, a fast‑learning front‑end developer, invites readers to follow him on Juejin and his WeChat public account “小包学前端”.