threejs

Three.js — WebGL 3D Scenes Skill

When to use

• Real 3D: product spins, interactive hero scenes, shaders/material effects, 3D data viz
• You need full control beyond “background effects”
• You can budget time for asset pipeline + performance tuning

Core mental model

• Create:
  • Scene (root graph)
  • Camera (Perspective/Orthographic)
  • Renderer (WebGLRenderer)
  • Mesh = Geometry + Material
  • Lights (if using non-unlit materials)
• Render loop:
  • requestAnimationFrame(animate)
  • Update time-based animations, controls, mixers, then renderer.render(scene, camera)

Key APIs/patterns

• Setup:
  • const renderer = new THREE.WebGLRenderer({ canvas, antialias, alpha })
  • renderer.setSize(width, height, false)
  • renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
• Camera:
  • camera.aspect = width / height; camera.updateProjectionMatrix()
• Scene graph:
  • scene.add(object) / object.position/rotation/scale
• Loading assets:
  • GLTFLoader (models), TextureLoader (images), DRACOLoader (compressed glTF)
• Controls (common):
  • OrbitControls (debug/product), PointerLockControls (FPS), custom pointer handlers
• Cleanup (important in SPAs):
  • geometry.dispose(), material.dispose(), texture.dispose(), renderer.dispose()
  • Remove event listeners; cancel RAF.

Common pitfalls

• Not handling resize → stretched/cropped rendering
• Too high devicePixelRatio → mobile GPU meltdown
• Leaking WebGL resources (not disposing) → crashes after route changes
• Loading huge textures/models → slow start; use compressed textures, Draco/KTX2, smaller maps
• Using too many lights/shadows → expensive; fake lighting with baked textures when possible

Quick recipes

1) Minimal spinning cube

import * as THREE from "three";
 

2) Respect reduced motion

• If prefers-reduced-motion: reduce, render a still frame (no RAF) or slow updates.

What to ask the user

• Is this decorative (hero) or functional 3D (product viewer)?
• Target devices: mobile? older iPhones?
• Asset format availability (glTF, HDRI, textures) and file size constraints
• Accessibility/reduced motion requirements