# lhlgithub/threejs-architecture-effects architecture

> Architecture diagram of the GitHub repository lhlgithub/threejs-architecture-effects, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/lhlgithub/threejs-architecture-effects
- Repository: https://github.com/lhlgithub/threejs-architecture-effects

## Overview

This repository is an agent skill for creating interactive, orbitable Three.js Chinese-architecture miniatures, plus a working starter and a script that copies it into a new project. The documented workflow is to plan the assembly, model the finished silhouette, animate parts from a shared timeline, and author procedural materials. The README documents the starter’s controls and capabilities; source excerpts were provided only for the scaffold script, so internal runtime wiring is not inferred.

Main entry points: [`SKILL.md`](https://github.com/lhlgithub/threejs-architecture-effects/blob/main/SKILL.md) (Architecture skill), [`scripts/scaffold.mjs`](https://github.com/lhlgithub/threejs-architecture-effects/blob/main/scripts/scaffold.mjs) (Starter copier), [`references/construction-principles.md`](https://github.com/lhlgithub/threejs-architecture-effects/blob/main/references/construction-principles.md) (Construction principles), [`references/template-guide.md`](https://github.com/lhlgithub/threejs-architecture-effects/blob/main/references/template-guide.md) (Template guide)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_guidance["Skill guidance"]
  node_skill["Architecture skill<br/>[SKILL.md]"]
  node_principles["Construction principles"]
  node_templateguide["Template guide<br/>[template-guide.md]"]
  node_verification["Verification guidance<br/>[verification.md]"]
end

subgraph group_starter["Interactive starter"]
  node_assembly["Assembly planning<br/>[builder.ts]"]
  node_architecture["Building design<br/>[architecture.ts]"]
  node_materials["Procedural materials<br/>[materials.ts]"]
  node_scene["Three.js scene"]
  node_controls["Timeline and cameras<br/>[App.tsx]"]
  node_entry["Application entry<br/>[main.tsx]"]
end

subgraph group_scaffold["Project creation"]
  node_scaffoldscript["Starter copier<br/>[scaffold.mjs]"]
  node_starterproject["Generated starter project"]
end

node_user(("User / agent"))

node_user -->|"invokes"| node_skill
node_skill -->|"consults"| node_principles
node_skill -->|"consults"| node_templateguide
node_skill -->|"consults"| node_verification
node_skill -->|"guides authoring"| node_assembly
node_skill -->|"guides authoring"| node_architecture
node_skill -->|"guides authoring"| node_materials
node_user -->|"runs"| node_scaffoldscript
node_scaffoldscript -->|"copies"| node_starterproject
node_user -->|"operates"| node_controls

click node_skill "https://github.com/lhlgithub/threejs-architecture-effects/blob/main/SKILL.md"
click node_principles "https://github.com/lhlgithub/threejs-architecture-effects/blob/main/references/construction-principles.md"
click node_templateguide "https://github.com/lhlgithub/threejs-architecture-effects/blob/main/references/template-guide.md"
click node_verification "https://github.com/lhlgithub/threejs-architecture-effects/blob/main/references/verification.md"
click node_assembly "https://github.com/lhlgithub/threejs-architecture-effects/blob/main/assets/starter/src/heritage/builder.ts"
click node_architecture "https://github.com/lhlgithub/threejs-architecture-effects/blob/main/assets/starter/src/heritage/architecture.ts"
click node_materials "https://github.com/lhlgithub/threejs-architecture-effects/blob/main/assets/starter/src/heritage/materials.ts"
click node_scene "https://github.com/lhlgithub/threejs-architecture-effects/blob/main/assets/starter/src/PagodaThreeScene.tsx"
click node_controls "https://github.com/lhlgithub/threejs-architecture-effects/blob/main/assets/starter/src/App.tsx"
click node_entry "https://github.com/lhlgithub/threejs-architecture-effects/blob/main/assets/starter/src/main.tsx"
click node_scaffoldscript "https://github.com/lhlgithub/threejs-architecture-effects/blob/main/scripts/scaffold.mjs"
click node_starterproject "https://github.com/lhlgithub/threejs-architecture-effects/tree/main/assets/starter"

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_skill,node_principles,node_templateguide,node_verification,node_user toneBlue
class node_assembly,node_architecture,node_materials,node_scene,node_controls,node_entry toneAmber
class node_scaffoldscript,node_starterproject toneMint
```

## Components

### Skill guidance

- [Architecture skill](https://github.com/lhlgithub/threejs-architecture-effects/blob/main/SKILL.md): `SKILL.md`
- [Construction principles](https://github.com/lhlgithub/threejs-architecture-effects/blob/main/references/construction-principles.md): `references/construction-principles.md`
- [Template guide](https://github.com/lhlgithub/threejs-architecture-effects/blob/main/references/template-guide.md): `references/template-guide.md`
- [Verification guidance](https://github.com/lhlgithub/threejs-architecture-effects/blob/main/references/verification.md): `references/verification.md`

### Interactive starter

- [Assembly planning](https://github.com/lhlgithub/threejs-architecture-effects/blob/main/assets/starter/src/heritage/builder.ts): `assets/starter/src/heritage/builder.ts`
- [Building design](https://github.com/lhlgithub/threejs-architecture-effects/blob/main/assets/starter/src/heritage/architecture.ts): `assets/starter/src/heritage/architecture.ts`
- [Procedural materials](https://github.com/lhlgithub/threejs-architecture-effects/blob/main/assets/starter/src/heritage/materials.ts): `assets/starter/src/heritage/materials.ts`
- [Three.js scene](https://github.com/lhlgithub/threejs-architecture-effects/blob/main/assets/starter/src/PagodaThreeScene.tsx): `assets/starter/src/PagodaThreeScene.tsx`
- [Timeline and cameras](https://github.com/lhlgithub/threejs-architecture-effects/blob/main/assets/starter/src/App.tsx): `assets/starter/src/App.tsx`
- [Application entry](https://github.com/lhlgithub/threejs-architecture-effects/blob/main/assets/starter/src/main.tsx): `assets/starter/src/main.tsx`

### Project creation

- [Starter copier](https://github.com/lhlgithub/threejs-architecture-effects/blob/main/scripts/scaffold.mjs): `scripts/scaffold.mjs`
- [Generated starter project](https://github.com/lhlgithub/threejs-architecture-effects/tree/main/assets/starter): `assets/starter`

### Other components

- **User / agent**

## Connections

- User / agent → Architecture skill: invokes
- Architecture skill → Construction principles: consults
- Architecture skill → Template guide: consults
- Architecture skill → Verification guidance: consults
- Architecture skill → Assembly planning: guides authoring
- Architecture skill → Building design: guides authoring
- Architecture skill → Procedural materials: guides authoring
- User / agent → Starter copier: runs
- Starter copier → Generated starter project: copies
- User / agent → Timeline and cameras: operates