Three.js tools

Small benches for real WebGL problems.

The live tools run on the Three.js Lab subdomain, but the root site explains when to use each one, what to measure, and which guide to read next.

Run scene health check Open full lab

Inspect assets

GLB Viewer

Use it when a model has unknown scale, missing materials, odd pivots, or animation clips that need a quick sanity check.

Workflow

Drop a GLB or GLTF file into the lab viewer.
Check bounding-box size, center, mesh count, material count, and animation clips.
Fit the camera from the computed bounds before tuning lights or UI.

Open GLB Viewer Three.js GLTFLoader checklist for clean model imports Fit a Three.js camera to an object without guessing Three.js environment maps for GLB viewers

Frame scenes

Camera FOV

Use it when a product, avatar, or imported object needs predictable viewport coverage across desktop and mobile.

Workflow

Enter object size, camera field of view, and target coverage.
Compare vertical and horizontal fit so narrow screens do not crop the model.
Copy the resulting distance into your viewer and update OrbitControls target.

Open Camera FOV Fit a Three.js camera to an object without guessing Make a Three.js canvas responsive without blurry rendering Three.js OrbitControls damping explained

Copy GLSL

Shader Starter

Use it when you need a visible ShaderMaterial baseline before adding textures, noise, displacement, or post effects.

Workflow

Start from a shader that proves UVs, uniforms, and time animation work.
Change one uniform or formula at a time.
Keep the starter around as a known-good debug material.

Open Shader Starter A practical ShaderMaterial starter for Three.js Three.js scene debugging checklist when nothing appears Three.js transparent background and screenshot export

Tune previews

Lighting Presets

Use it when a GLB looks black, flat, or too dramatic under the default scene lights.

Workflow

Choose neutral inspection, product glossy, clay, or dark hero lighting.
Copy only the lights needed for the current scene.
Test on mobile before adding shadows or postprocessing.

Open Lighting Presets Three.js lighting setup for readable product viewers Three.js shadows without black scenes Three.js color management for PBR materials

Learn patterns

Examples

Use it when you want a small isolated scene before copying an idea into a larger app.

Workflow

Open the smallest example that matches the problem.
Read the associated guide before combining examples.
Copy the pattern into a clean scene and measure performance early.

Open Examples Build Three.js particles with BufferGeometry Three.js instancing for many repeated objects Three.js Raycaster picking checklist