threejs-scene-setup

three.js Scene Setup

Create the foundation of a three.js app: module loading, the scene/camera/renderer trio, the render loop, responsive resizing, and camera controls. Patterns target r184. Read the installed three version before changing an existing project because examples and addons move across releases.

When to use

• Use when bootstrapping a three.js scene, fixing a blank/black canvas, making the canvas responsive, setting up the animation loop, or adding OrbitControls.
• Use when package.json depends on three and code does import * as THREE from 'three'.

When not to use: loading .gltf/.glb models or skinned animation → threejs-gltf-loading. Materials, lights, shadows, environment maps → threejs-materials-lighting. 2D rendering → pixijs-rendering.

Core workflow

1. Load three.js as an ES module with an import map. Since r147 the bare specifier 'three' and 'three/addons/' must be mapped (in HTML or by a bundler). Addons (controls, loaders) live under three/addons/....
2. Create the trio. A Scene (root of the graph), a PerspectiveCamera(fov, aspect, near, far) moved back from the origin, and a WebGLRenderer whose domElement is in the DOM. Set size and pixelRatio.
3. Add a mesh. new Mesh(geometry, material) and scene.add(mesh). With a lit material you also need a light (see threejs-materials-lighting).
4. Drive a render loop with renderer.setAnimationLoop(fn). It's the modern, WebXR-/WebGPU-safe replacement for hand-rolled requestAnimationFrame. Use a Clock for delta time.
5. Handle resize so the camera aspect and renderer match the canvas; update camera.aspect, call updateProjectionMatrix(), and renderer.setSize(...).
6. Add OrbitControls for orbit/pan/zoom while developing. Confirm something actually renders (a lit cube, the controls responding) before assuming success.

Patterns

1. HTML import map + module entry (no bundler)