How hmthanh/3d-human-model works
This is a browser-based Three.js viewer for animated human glTF models. The main workflow parses URL options, creates a Viewer, loads a model, and presents it in an interactive 3D scene; viewer controls also expose animation and skeleton inspection. The README documents the human model and its rig, while source excerpts show scene setup, loading, environment support, and GUI functionality. Edges are limited to caller relationships visible in excerpts or README; several viewer internals are represented together because their detailed orchestration is only partially sampled.
Main entry points: viewer.js Viewer runtime · app.js URL options and app · model Human glTF models · environment Environment maps
Components 14
Application
- URL options and app
src/app.js
3D Viewer
- Viewer runtime
src/viewer.js - Three.js WebGL scene
src/viewer.js - glTF model loading
src/viewer.js - Rig animation
src/viewer.js - Skeleton and bone controls
src/viewer.js - Environment lighting
src/viewer.js - Camera and viewer controls
src/viewer.js
Model Assets
- Human glTF models
assets/model - Environment maps
assets/environment
Runtime Utilities
- ZIP virtual filesystem
src/zip-fs.js - Vignette background
lib/three-vignette.js - Cube demo
src/demo.js
Other components
- Viewer user
Connections 10
- Viewer user → URL options and app: opens viewer
src/app.js - URL options and app → Viewer runtime: creates and loads
src/app.js - Viewer runtime → glTF model loading: loads model
src/viewer.js - glTF model loading → Human glTF models: loads assets
src/viewer.js - Viewer runtime → Three.js WebGL scene: configures scene
src/viewer.js - Viewer runtime → Environment lighting: sets environment
src/viewer.js - Environment lighting → Environment maps: loads maps
src/viewer.js - Viewer runtime → Rig animation: controls clips
src/viewer.js - Viewer runtime → Skeleton and bone controls: adds bone controls
src/viewer.js - Viewer runtime → Camera and viewer controls: configures controls
src/viewer.js