Vavist main entrance

Three.js Lab

A browser-native workspace for inspecting GLB files, framing cameras, tuning shaders, and copying practical Three.js patterns.

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.
5
focused tools
24
builder guides
1
publishing checklist

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 target narrow Three.js search problems.

Reference routes

Guides for the problems builders actually search.

Original notes from the lab: each guide turns a common Three.js failure mode into a practical workflow, with source links for deeper reading.

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