Three.js Lab by Vavist

Three.js tools for GLB, camera, shaders, and lighting.

Inspect a local model, calculate a reproducible camera frame, preview shader and lighting code, then verify the result before publishing. No account or file upload is required.

Open GLB viewer Run scene check Browse guides
Model looks wrong Inspect a GLB Open the viewer when scale, pivots, materials, or animation clips need a fast read. Object will not fit Frame the camera Use bounds and field-of-view math before guessing another camera distance. Ready to ship Run the scene check Score loading, mobile performance, camera, lighting, and fallback quality.
Local
GLB files stay on your device
24.81°
tested default vertical FOV
0 ads
all five tools stay ad-free

Launchpad

Open the exact bench you need.

Vavist now routes the homepage toward the Three.js Lab surface: compact browser tools for the parts of WebGL work that usually waste the most time.

Inspect assets GLB Viewer Drop a GLB or GLTF file, read bounds, preview materials, and catch scale problems early. Frame scenes Camera FOV Calculate perspective camera distance and field of view for objects that must fill the viewport. Copy GLSL Shader Starter Generate a small ShaderMaterial base with uniforms, vertex code, and a visible fragment pattern. Tune previews Lighting Presets Copy practical hemisphere, key, rim, and product lighting setups for readable model previews. Learn patterns Examples Browse small Three.js examples that isolate one useful idea at a time.
Read the tool workflows Check a scene before publishing

Static by design

Fast pages, local files, readable examples.

Three.js Lab keeps the public site focused on browser graphics. The tools favor transparent math, copyable code, and client-side previews over accounts or opaque backends.

  • Model inspection stays in the browser.
  • Camera and lighting values are easy to copy.
  • Guides document one reproducible Three.js problem at a time.

Reference routes

Tested guides for recurring browser-scene failures.

Each maintained guide records its environment, sample, measurements, known limits, and primary sources.

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.
View all guides