Three.js — WebGL 3D Scenes Skill

When to use

• Real 3D: product spins, interactive hero scenes, shaders/material effects, 3D data viz
• Full control beyond "background effects"
• Can budget time for asset pipeline + performance tuning

Core mental model

• Scene (root graph) → Camera (Perspective/Orthographic) → Renderer (WebGLRenderer)
• Mesh = Geometry + Material
• Lights (if using non-unlit materials)
• Render loop: requestAnimationFrame(animate) → update + renderer.render(scene, camera)