Three.js tools

Small benches for real WebGL problems.

The live tools run on this domain. Each workflow explains what to enter, what to measure, which limitation matters, and which tested guide to read next.

Run scene health check Open GLB Viewer

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

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

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

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

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 Three.js Raycaster picking checklist