Master Three.js: Build Interactive 3D Scenes with Camera, Controls, and Animations

Tools

All APIs can be accessed through the three.js official documentation.

Scene

The scene defines where to place objects, lights, and cameras for rendering.

Camera

See the three.js camera examples at threejs.org/examples/?q=camera#webgl_camera.

Cube

Code to create a cube geometry, material, mesh, and add it to the scene.

import * as THREE from "three";
// create scene
const scene = new THREE.Scene();
// create camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);
scene.add(camera);
// create cube
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube);

Render

Initialize the WebGLRenderer, set its size, append its canvas to the document, and render the scene.

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

Orbit Controls

Import and create OrbitControls to enable interactive camera orbiting.

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
render();

Axes Helper

Add an axes helper to visualize coordinate axes.

const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

Animation

Move the cube along the x‑axis using requestAnimationFrame or GSAP.

// Using requestAnimationFrame
function render() {
  cube.position.x += 0.01;
  if (cube.position.x > 5) cube.position.x = 0;
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}
render();

// Using GSAP
import gsap from "gsap";
gsap.to(cube.position, { x: 5, duration: 5, repeat: -1, yoyo: true, delay: 2 });

Responsive Resize

Update camera aspect, projection matrix, and renderer size on window resize.

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

Fullscreen

Toggle fullscreen on double‑click.

window.addEventListener("dblclick", () => {
  const full = document.fullscreenElement;
  if (!full) {
    renderer.domElement.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
});

dat.gui UI

Use dat.gui to control cube position, visibility, wireframe, and color.

import * as dat from "dat.gui";
const gui = new dat.GUI();
gui.add(cube.position, "x").min(0).max(5).step(0.01).name("Move X");
gui.add(cube, "visible").name("Visible");
gui.addColor({ color: "#ffff00" }, "color").onChange(v => cube.material.color.set(v));

The frontend world should not be limited to Vue and React—WebGPU awaits your conquest.