GLB Viewer

A modern, configurable GLB/GLTF viewer built with Three.js + React. Drag & drop a model, tweak lighting and post-processing, inspect materials, and save presets.

Live demo

https://leatherfire.github.io/GLB-Viewer/

Features

• Load .glb / .gltf via drag & drop or file picker
• Environment (IBL): built-in presets + custom HDR/EXR/JPG equirectangular load
• Background: color / environment / image
• Lighting rig: key/fill/rim/hemi + lighting presets + shadow tuning
• Rendering: tone mapping, exposure, temporal AA (TAA), pixel ratio cap
• Shading modes: PBR / Matcap, Lit / Unlit, Wireframe
• Post FX: AO (SSAO / GTAO / N8AO), SSR, Bloom, DOF, Vignette, Grain, Sharpen, Chromatic Aberration, Color balance
• Selection & focus: click-to-select, outline highlight, isolate, focus camera
• Material Inspector: edit base color / metalness / roughness / emission / alpha, reset to defaults, focus & highlight by material usage
• Presets: built-in + user presets, set startup preset, optionally remember last session
• Screenshot export (PNG)

Controls

• Orbit: left click / touch drag
• Pan: right click (or two-finger drag on trackpads)
• Zoom: scroll / pinch
• Select mesh: left click on the model

Getting started (local)

npm install
npm run dev

Open the URL printed by Vite (usually http://localhost:5173).

Build & preview

npm run build
npm run preview

Deploy

See docs/DEPLOYMENT.md.

Notes

• User settings and saved presets are stored in localStorage (client-side only).

License

MIT — see LICENSE.