09. Yingzao Fashi Assembly

# 09. Yingzao Fashi Assembly

Generate a single, self-contained HTML file that renders a Yingzao Fashi (Building Standards) assembly/disassembly animation of a famous Chinese ancient timber building.

No user input or photo upload is required. Choose one well-documented Chinese ancient timber building as your subject — for example, the Yingxian Wooden Pagoda (Fogong Temple Sakyamuni Pagoda), the Main Hall of Foguang Temple, the Main Hall of Nanchan Temple, or a comparable landmark. Pick a building you can model with architectural credibility: a simpler building modeled accurately beats an ambitious one modeled wrong. State your choice clearly in the app UI.

Plan first, then execute. Do not write the final HTML until the plan is reviewed and the build order is validated.

## Required features

### 1. Building selection and component mapping

- Choose the building type (pagoda, hall, pavilion, etc.) and present its name in Chinese and English, its location, and its dynasty/period in the UI.
- Map and label the major structural components in the traditional order: columns (柱), beams (梁), fang/tie-beams (枋), purlins (檩), rafters (椽), and dougong bracket sets (斗拱).
- Each component must have a floating label (HTML/CSS overlay or Three.js sprite) showing its Chinese name, pinyin, and a one-sentence function description.

### 2. Three.js assembly animation

- Build a simplified but architecturally credible 3D model using Three.js (single HTML file, embedded JS/CSS, no external dependencies except Three.js from a CDN).
- Animate the assembly in the actual traditional construction sequence:
  1. Erect columns and establish the bay grid.
  2. Place fang/tie-beams to lock the frame.
  3. Install main beams and purlins.
  4. Assemble and place dougong bracket sets.
  5. Lay rafters and apply roof planes.
- Include a play/pause/step UI to control the assembly animation.
- Support disassembly as well: a reverse mode that takes the completed building apart in the opposite order.

### 3. Age erosion slider

- Add a slider (0 = new, 100 = ancient) that drives visible aging on wood materials.
- Effects should include wood darkening, roughness increase, paint pigment fading and peeling (use texture/color mixing, not external image assets), and subtle geometry warping/twisting to suggest centuries of settlement.
- The slider must work in real time and be visually obvious.

### 4. Structural X-ray / transparent mode

- Add a toggle that hides or makes translucent roof tiles, wall panels, and decorative cladding to reveal the internal timber frame.
- In X-ray mode, highlight mortise-and-tenon joint locations with visible points or simplified joint geometry so the joinery logic is readable.

## Output constraints

- Exactly one HTML file.
- No build step or bundler required; open the file in a browser and it runs.
- Responsive canvas sizing. Handle window resize.
- Include brief in-app instructions so a first-time user knows how to use the controls.

## Loop / validation rule

Do not stop until:

- The HTML file loads in a browser without errors and without requiring a local server (`file://` protocol is acceptable).
- The assembly animation plays through all five construction stages in the correct traditional order and each stage is clearly distinguishable.
- All component labels appear and are readable.
- The age erosion slider produces a visible, smooth transition from new to weathered timber.
- The X-ray toggle reveals the internal frame and joint indicators.
- You have personally reviewed the generated HTML source to ensure there are no placeholder comments, missing functions, or TODOs.

If any requirement is broken, incomplete, or visually unclear, fix it and re-test. Continue until the file is fully playable and inspectable.

Before declaring complete, run these checks:

1. Open the file in a browser. Confirm the canvas appears and the building's name and period are shown.
2. Click Play on the assembly animation. Confirm columns appear first, then beams, then dougong, then roof. Confirm reverse mode disassembles the building.
3. Move the age slider from 0 to 100. Confirm the wood gets visibly darker and paint fades.
4. Toggle X-ray mode. Confirm roof/walls go translucent and joints are marked.
5. Hover over a column and a dougong. Confirm labels appear with correct names.

If any check fails, identify the specific missing code or broken function, patch it, save the file, reload the browser, and re-run all five checks.