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)