Three.js guides
Practical WebGL notes for builders.
Ten maintained Three.js guides with reproducible demos, code comparisons, recorded measurements, primary sources, and explicit browser-test limits.
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.
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 · 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 · 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.
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.
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.
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 · Raycaster
Three.js Raycaster picking checklist
Raycasting works best when pointer coordinates, camera projection, and pickable objects are treated as one pipeline.
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.