田园小屋搭建

用 Three.js 做一个单文件 HTML：「田园治愈风小屋搭建全过程」微缩景观，带完整回放和代码联动面板。双击即可打开，不依赖构建工具，three.js 从 CDN 引入并固定版本。

【一、视觉规范（高清大块质感，先锁定，不要偏离）】
形体：
- 用「大块的简洁几何体」搭建：圆角方块、楔形屋顶、少段数圆柱、低面数树冠
- 禁止用密集的小方块网格（体素风）拼形状；一栋房子只由几十个大构件组成
- 所有方块边缘带小倒角（RoundedBoxGeometry，圆角半径约 2-4%），让边缘能接住高光
- 少量构件做微小随机偏移与色差（±3% 明度），避免机械重复

渲染（必须高清）：
- WebGLRenderer：antialias: true，setPixelRatio(min(devicePixelRatio, 2))，输出 sRGB
- 禁止任何像素化后处理、低分辨率渲染目标、NearestFilter、马赛克效果
- 阴影：一束平行光，PCFSoftShadowMap，shadowMap 4096，阴影相机紧贴场景范围，调好 bias，边缘柔和不锯齿
- 一盏半球光/弱环境光补暗部；材质用 MeshStandardMaterial，roughness 0.9、metalness 0，不要塑料高光；
  用轻微顶点色渐变或接触阴影模拟环境光遮蔽
- 窗口缩放时重设渲染尺寸与相机，保持清晰

相机与背景：
- 浮空方形地块 + 斜 45° 等距视角（正交相机或小视场角透视），鼠标可旋转、缩放、平移，带阻尼
- 背景暖米白 #F1EEE6，地块在背景上投一片柔和长阴影
- 地块侧面是水平分层土壤剖面（深浅棕交替，嵌有碎石块），边缘整齐锐利

配色：
- 6-8 种低饱和暖色：草绿、砖红、陶橙、米黄、灰蓝、深棕，整体统一，不出现高饱和纯色

【二、场景内容】
地块上有：
- 砖木小屋：砖墙、陶瓦屋顶（逐片）、木门、两扇窗、烟囱
- 木栅栏围住前院
- 菜园：3 条菜垄，南瓜、卷心菜、胡萝卜缓慢生长
- 小池塘：圆润的水面，睡莲，岸边几块石头
- 花草：各色小花丛、高草、灌木、一棵大树
- 点缀：木柴堆、雨水桶、独轮车、小石板路
- 动物：池塘里 2 只鸭子（游动），草地上 1 只兔子（蹦跳），几只蝴蝶（绕花飞）；
  小屋完工后再出现一只猫趴在屋顶

【三、核心架构】
1. 施工脚本：搭建过程写成一份脚本，每行一条指令，例如
   wall(0,0,0,'brick') / roofTile(3,2,'terracotta') / plant('cabbage',2,5) / duck(pond,1)
   页面内置小解释器，把脚本编译成「时间轴」：{id, line, stage, start, duration, anim}
2. 画面是时间 t 的纯函数 render(t)：禁止在动画中累加状态，拖到任意位置都必须正确还原
3. 所有随机（砖块微小偏移、花草分布、动物路径）使用 seeded PRNG，同 seed 每次完全一致
4. 动画：构件「从上方落下 + 轻微弹性落位」；植物从 0 生长到满；动物按 t 计算路径

【四、搭建阶段（共 8 步，约 45 秒）】
1 地块升起 → 2 栅栏与小路 → 3 地基与砖墙（逐块）→ 4 屋顶瓦片与烟囱（逐片）
→ 5 门窗 → 6 菜园垄与蔬菜生长 → 7 池塘、花草、树、木柴、雨水桶 → 8 动物登场 + 相机环绕展示

【五、界面布局】
- 左侧约 60% 为 3D 场景；右侧约 40% 为代码区；窄屏时代码区放到下方
- 场景底部控制条：播放/暂停、可拖动进度条、0.5x/1x/2x/4x 变速、上一步/下一步、
  当前步骤标题（如「步骤 4/8 屋顶瓦片」）
- 右侧代码区：深色背景、等宽字体、简单语法高亮、行号
  · 显示的代码就是被执行的施工脚本，禁止伪造或另写一份装饰性代码
  · 播放时当前行高亮并自动滚动到可视区
  · 拖动进度条时高亮行同步跳转
  · 点击任意一行，场景跳转到该行执行完成的时刻
  · 按 8 个阶段分组，可折叠，当前阶段自动展开
  · 悬停某行时，对应的 3D 构件短暂发光
- 左上角小面板：标题、三角面数、FPS；光源方位角滑杆
- 按钮：「录制 webm」（canvas.captureStream + MediaRecorder）、「导出时间轴 JSON」、
  「重新播放」、「随机种子」输入框（修改后重新生成）

【六、硬性要求】
- 打开后 1 秒内开始第一个构件落位，自动播放，全程约 45 秒，结束后停在环绕展示并可循环
- 拖动进度条到任意时刻，场景与代码高亮必须同时正确
- 60 FPS 目标：砖、瓦、草使用 InstancedMesh，总三角面控制在 8 万以内
- 不使用外部图片或模型文件，全部用程序生成几何
- 代码结构分层：脚本解释器 / 时间轴 / 渲染层 / UI 层，互不耦合，便于后续修改

【七、优先级（先保 Tier1，再逐级加）】
Tier1：高清渲染 + 施工脚本 + 时间轴 + 8 步回放 + 代码高亮联动 + 小屋、栅栏、菜园、树
Tier2：点击代码跳转、池塘与鸭子、花草、录制 webm、导出 JSON
Tier3：兔子、蝴蝶、屋顶的猫、悬停发光、烟囱烟雾、草地随风摇摆
范围宁小勿大：先把 Tier1 做稳、做漂亮，不要为了数量牺牲质感。

【八、画质自检（最后必须检查）】
放大到 200% 时，边缘依旧清晰无锯齿、无马赛克；看不出一格一格的方块颗粒。