Master Three.js Scene Setup and Rendering

A foundational Three.js reference covering the core building blocks of a 3D scene: Scene (background colors/skyboxes/cubemaps, environment maps, linear/exponential fog), four camera types (PerspectiveCamera for standard 3D, OrthographicCamera for 2D/isometric views, ArrayCamera for multiple viewports, CubeCamera for rendering reflection environment maps), and WebGLRenderer setup (antialiasing, alpha, tone mapping via ACESFilmicToneMapping, SRGBColorSpace output, PCF soft shadow maps). It documents Object3D as the base class all meshes/groups/lights/cameras extend - position/rotation/quaternion/scale transforms, world-vs-local coordinate queries, parent/child hierarchy, layers for selective rendering, and traverse() for walking the scene graph - plus Group for organizing multiple objects under one transform and Mesh for combining geometry with material (per-geometry-group materials, shadow casting/receiving, frustum culling, render order). It also covers Three.js's right-handed coordinate system and its math utility classes: Vector3 (arithmetic, normalize, lerp, dot/cross, matrix/quaternion transforms, camera projection), Matrix4 (building and composing/decomposing transforms), Quaternion (slerp, axis-angle, Euler conversion), Euler (rotation order), Color (hex/named/RGB/HSL construction and blending), and MathUtils (clamp, lerp, mapLinear, deg/rad conversion, random values, smoothstep).

Use this when setting up the core structure of a Three.js scene - scenes, cameras, renderers, transforms, resize handling, or object hierarchy - or as foundational grounding before moving to specialized topics like shaders or post-processing. It's a fundamentals reference, not a deep dive: geometry creation belongs to threejs-geometry, material types to threejs-materials, and lighting/shadows specifically to threejs-lighting.

import * as THREE from "three";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000,
);
const renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);

Covers common runtime patterns beyond this quick start: proper disposal of geometries/materials/textures/renderer to avoid leaks, THREE.Timer (r183, pauses when the tab is hidden) or the legacy THREE.Clock for frame-independent animation via getDelta(), renderer.setAnimationLoop() as the preferred animation-loop pattern over manual requestAnimationFrame (for WebXR compatibility), a responsive-canvas resize handler, and THREE.LoadingManager for tracking asset-loading progress across loaders like TextureLoader and GLTFLoader.

Built on the three package itself, plus its bundled addons: BufferGeometryUtils.mergeGeometries for reducing draw calls, THREE.LOD for distance-based mesh switching, loaders (TextureLoader, GLTFLoader) wired through a shared LoadingManager, and the experimental WebGPURenderer (r183) as an alternative to the default, fully-supported WebGL renderer - WebGPU uses TSL (Three.js Shading Language) instead of GLSL.

Developers setting up their first Three.js scene, or needing a quick reference for cameras, the renderer, object transforms, math utilities, cleanup, and performance patterns (merged geometries, LOD, object pooling, avoiding repeated getWorldPosition calls in loops) before moving on to shaders or post-processing.