# hmthanh/3d-human-model architecture

> Architecture diagram of the GitHub repository hmthanh/3d-human-model, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-30). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/hmthanh/3d-human-model
- Repository: https://github.com/hmthanh/3d-human-model

## Overview

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: [`src/viewer.js`](https://github.com/hmthanh/3d-human-model/blob/main/src/viewer.js) (Viewer runtime), [`src/app.js`](https://github.com/hmthanh/3d-human-model/blob/main/src/app.js) (URL options and app), [`assets/model`](https://github.com/hmthanh/3d-human-model/tree/main/assets/model) (Human glTF models), [`assets/environment`](https://github.com/hmthanh/3d-human-model/tree/main/assets/environment) (Environment maps)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application"]
  node_app["URL options and app<br/>[app.js]"]
end

subgraph group_view["3D Viewer"]
  node_viewer["Viewer runtime<br/>[viewer.js]"]
  node_three["Three.js WebGL scene<br/>[viewer.js]"]
  node_model_loading["glTF model loading<br/>[viewer.js]"]
  node_animation["Rig animation<br/>[viewer.js]"]
  node_inspection["Skeleton and bone controls<br/>[viewer.js]"]
  node_environment_setup["Environment lighting<br/>[viewer.js]"]
  node_viewer_controls["Camera and viewer controls<br/>[viewer.js]"]
end

subgraph group_assets["Model Assets"]
  node_models["Human glTF models"]
  node_environment["Environment maps"]
end

subgraph group_utilities["Runtime Utilities"]
  node_zip_fs["ZIP virtual filesystem<br/>[zip-fs.js]"]
  node_vignette["Vignette background<br/>[three-vignette.js]"]
  node_demo["Cube demo<br/>[demo.js]"]
end

node_user(("Viewer user"))

node_user -->|"opens viewer"| node_app
node_app -->|"creates and loads"| node_viewer
node_viewer -->|"loads model"| node_model_loading
node_model_loading -->|"loads assets"| node_models
node_viewer -->|"configures scene"| node_three
node_viewer -->|"sets environment"| node_environment_setup
node_environment_setup -->|"loads maps"| node_environment
node_viewer -->|"controls clips"| node_animation
node_viewer -->|"adds bone controls"| node_inspection
node_viewer -->|"configures controls"| node_viewer_controls

click node_app "https://github.com/hmthanh/3d-human-model/blob/main/src/app.js"
click node_viewer "https://github.com/hmthanh/3d-human-model/blob/main/src/viewer.js"
click node_models "https://github.com/hmthanh/3d-human-model/tree/main/assets/model"
click node_environment "https://github.com/hmthanh/3d-human-model/tree/main/assets/environment"
click node_three "https://github.com/hmthanh/3d-human-model/blob/main/src/viewer.js"
click node_model_loading "https://github.com/hmthanh/3d-human-model/blob/main/src/viewer.js"
click node_animation "https://github.com/hmthanh/3d-human-model/blob/main/src/viewer.js"
click node_inspection "https://github.com/hmthanh/3d-human-model/blob/main/src/viewer.js"
click node_environment_setup "https://github.com/hmthanh/3d-human-model/blob/main/src/viewer.js"
click node_viewer_controls "https://github.com/hmthanh/3d-human-model/blob/main/src/viewer.js"
click node_zip_fs "https://github.com/hmthanh/3d-human-model/blob/main/src/zip-fs.js"
click node_vignette "https://github.com/hmthanh/3d-human-model/blob/main/lib/three-vignette.js"
click node_demo "https://github.com/hmthanh/3d-human-model/blob/main/src/demo.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_user toneBlue
class node_viewer,node_three,node_model_loading,node_animation,node_inspection,node_environment_setup,node_viewer_controls toneAmber
class node_models,node_environment toneMint
class node_zip_fs,node_vignette,node_demo toneRose
```

## Components

### Application

- [URL options and app](https://github.com/hmthanh/3d-human-model/blob/main/src/app.js): `src/app.js`

### 3D Viewer

- [Viewer runtime](https://github.com/hmthanh/3d-human-model/blob/main/src/viewer.js): `src/viewer.js`
- [Three.js WebGL scene](https://github.com/hmthanh/3d-human-model/blob/main/src/viewer.js): `src/viewer.js`
- [glTF model loading](https://github.com/hmthanh/3d-human-model/blob/main/src/viewer.js): `src/viewer.js`
- [Rig animation](https://github.com/hmthanh/3d-human-model/blob/main/src/viewer.js): `src/viewer.js`
- [Skeleton and bone controls](https://github.com/hmthanh/3d-human-model/blob/main/src/viewer.js): `src/viewer.js`
- [Environment lighting](https://github.com/hmthanh/3d-human-model/blob/main/src/viewer.js): `src/viewer.js`
- [Camera and viewer controls](https://github.com/hmthanh/3d-human-model/blob/main/src/viewer.js): `src/viewer.js`

### Model Assets

- [Human glTF models](https://github.com/hmthanh/3d-human-model/tree/main/assets/model): `assets/model`
- [Environment maps](https://github.com/hmthanh/3d-human-model/tree/main/assets/environment): `assets/environment`

### Runtime Utilities

- [ZIP virtual filesystem](https://github.com/hmthanh/3d-human-model/blob/main/src/zip-fs.js): `src/zip-fs.js`
- [Vignette background](https://github.com/hmthanh/3d-human-model/blob/main/lib/three-vignette.js): `lib/three-vignette.js`
- [Cube demo](https://github.com/hmthanh/3d-human-model/blob/main/src/demo.js): `src/demo.js`

### Other components

- **Viewer user**

## Connections

- Viewer user → URL options and app: opens viewer (evidence: `src/app.js`)
- URL options and app → Viewer runtime: creates and loads (evidence: `src/app.js`)
- Viewer runtime → glTF model loading: loads model (evidence: `src/viewer.js`)
- glTF model loading → Human glTF models: loads assets (evidence: `src/viewer.js`)
- Viewer runtime → Three.js WebGL scene: configures scene (evidence: `src/viewer.js`)
- Viewer runtime → Environment lighting: sets environment (evidence: `src/viewer.js`)
- Environment lighting → Environment maps: loads maps (evidence: `src/viewer.js`)
- Viewer runtime → Rig animation: controls clips (evidence: `src/viewer.js`)
- Viewer runtime → Skeleton and bone controls: adds bone controls (evidence: `src/viewer.js`)
- Viewer runtime → Camera and viewer controls: configures controls (evidence: `src/viewer.js`)