threejs-scene-setup Checked

const canvas = document.querySelector('#c');

const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });

renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // cap for perf

renderer.setSize(window.innerWidth, window.innerHeight);

const scene = new THREE.Scene();

scene.background = new THREE.Color(0x101018);

const camera = new THREE.PerspectiveCamera(

60, // vertical field of view (degrees)

window.innerWidth / window.innerHeight, // aspect

0.1, // near

100 // far

);

camera.position.set(3, 2, 5);

camera.lookAt(0, 0, 0);

const cube = new THREE.Mesh(

new THREE.BoxGeometry(1, 1, 1),

new THREE.MeshNormalMaterial() // unlit; shows orientation without a light

);

scene.add(cube);

### 3. The render loop (setAnimationLoop + Timer)

const timer = new THREE.Timer(); // replaces the deprecated THREE.Clock (r183+)

timer.connect(document); // optional: no huge delta after a hidden tab

renderer.setAnimationLoop((time) => {

timer.update(time); // call once per frame, before getDelta()

const dt = timer.getDelta(); // seconds since last frame

cube.rotation.x += dt; // frame-rate independent

cube.rotation.y += dt * 0.7;

renderer.render(scene, camera);

});

// renderer.setAnimationLoop(null); // stop the loop

### 4. Responsive resize

function onResize() {

const w = window.innerWidth, h = window.innerHeight;

camera.aspect = w / h;

camera.updateProjectionMatrix(); // required after changing aspect

renderer.setSize(w, h);

}

window.addEventListener('resize', onResize);

### 5. OrbitControls (orbit / pan / zoom)

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const controls = new OrbitControls(camera, renderer.domElement);

controls.enableDamping = true; // inertial feel

controls.target.set(0, 0, 0);

renderer.setAnimationLoop(() => {

controls.update(); // needed every frame when damping is on

renderer.render(scene, camera);

});

## Pitfalls

- **`Failed to resolve module specifier "three"`** → missing import map (or bundler
  config). Map both `"three"` and `"three/addons/"`; addon paths must end with `/`.
- **Black canvas, no errors** → camera is at the origin (inside/behind the object),
  or you used a lit material (`MeshStandardMaterial`) with no light. Move the camera
  back; use `MeshNormalMaterial`/`MeshBasicMaterial` to verify geometry first.
- **Nothing animates** → you never called `renderer.render` inside the loop, or you
  call `setAnimationLoop` but render outside it.
- **Stretched / squashed view on resize** → you resized the renderer but didn't
  update `camera.aspect` + `updateProjectionMatrix()`.
- **Blurry or jagged on HiDPI** → set `renderer.setPixelRatio(...)`; cap it (≈2) so
  4K/retina screens don't tank performance.
- **OrbitControls feel dead** → with `enableDamping = true` you must call
  `controls.update()` every frame.
- **Old tutorials use `<script src="three.min.js">`** → since r147 three.js ships
  ES modules only; use `type="module"` + import maps.

## References

- For coordinate conventions, the scene-graph (`Group`, parent/child transforms,
  `Object3D` add/remove), `OrthographicCamera` for 2.5D, and disposing of
  geometries/materials/textures to avoid leaks, read `references/scene-graph.md`.

## Related skills

- `threejs-materials-lighting` — give surfaces a lit look (lights, shadows, PBR).
- `threejs-gltf-loading` — load 3D models and play their animations.
- `pixijs-rendering` — 2D rendering in the browser.
- `fps-shooter` — a 3D genre template that composes three.js skills.