Three.js guides

Practical WebGL notes for builders.

Original Three.js guides written for the problems that show up in real browser scenes: imports, cameras, shaders, lighting, responsive canvases, pivots, performance, and color.

7 min read · GLTFLoader Three.js GLTFLoader checklist for clean model imports Load models as assets you can inspect, measure, and normalize before they become part of a production scene. 8 min read · camera Fit a Three.js camera to an object without guessing A camera-fit routine is the difference between a reusable viewer and a scene that only works for one model. 8 min read · ShaderMaterial A practical ShaderMaterial starter for Three.js Start shaders from a predictable scaffold so the first visible result is easy to inspect and easy to change. 7 min read · lighting Three.js lighting setup for readable product viewers A product viewer needs lights that explain the shape, not lights that show off the renderer. 7 min read · particles Build Three.js particles with BufferGeometry Particles are most useful when the geometry is simple, the count is intentional, and the animation avoids layout work. 8 min read · responsive Make a Three.js canvas responsive without blurry rendering Responsive WebGL is mostly about matching CSS size, drawing-buffer size, pixel ratio, and camera projection. 7 min read · rotation Fix Three.js rotation around the wrong pivot Most rotation bugs are not animation bugs. They are origin, geometry, or parent-space problems. 8 min read · performance A practical Three.js performance budget for small sites Performance gets easier when each scene has a budget before it has polish. 8 min read · color Three.js color management for PBR materials Color problems often come from mismatched assumptions between textures, renderer output, lighting, and tone mapping. 7 min read · debugging Three.js scene debugging checklist when nothing appears A blank canvas is easier to fix when you test renderer, camera, geometry, material, lights, and animation in order. 8 min read · static site How to structure a static Three.js site for useful search pages A WebGL site should not rely on canvas alone. Each page needs readable text that explains the problem the demo solves. 8 min read · screenshots Three.js transparent background and screenshot export Transparent canvas output is simple when alpha, clear color, CSS background, and screenshot timing all agree. 7 min read · OrbitControls Three.js OrbitControls damping explained Damping gives OrbitControls weight, but it only works when the render loop and target are set up correctly. 8 min read · Raycaster Three.js Raycaster picking checklist Raycasting works best when pointer coordinates, camera projection, and pickable objects are treated as one pipeline. 8 min read · shadows Three.js shadows without black scenes Good shadows need renderer support, casting objects, receiving surfaces, enough light, and a camera range that fits the scene. 8 min read · textures Three.js texture loading and color space checklist Texture bugs become easier when color maps and data maps are handled differently from the start. 8 min read · DRACO Three.js DRACO and KTX2 compression overview Geometry compression and texture compression solve different load problems, so choose them by bottleneck. 8 min read · labels Three.js HTML labels over 3D objects HTML labels are a UI layer problem as much as a 3D problem: position, depth, occlusion, and readability all matter. 7 min read · LoadingManager Three.js loading progress with LoadingManager Loading UI should explain what the scene is waiting for and keep the rest of the page usable. 8 min read · InstancedMesh Three.js instancing for many repeated objects Instancing keeps repeated objects cheap by drawing many transforms of the same geometry and material together. 8 min read · environment map Three.js environment maps for GLB viewers Environment lighting often does more for PBR materials than another direct light. 8 min read · mobile Three.js mobile performance checklist Mobile WebGL quality comes from budgets: fewer pixels, fewer surprises, and graceful fallbacks. 7 min read · screenshot Three.js canvas screenshot export for tools A screenshot feature should export the scene the user sees, not an old frame, empty buffer, or accidental UI state. 10 min read · gotchas 27 Three.js mistakes that break WebGL scenes Most broken Three.js pages fail in repeatable ways. This checklist turns those failures into a faster review path.