Three.js Primitive Reconstructor 是一个用于从静态 3D 游戏美术参考图像生成 Three.js 原始几何体重建场景的技能。它面向低多边形、体素、等距或风格化参考图，输出可在浏览器中直接运行的单文件 HTML 场景。
用途 该技能的核心用途是依据参考图像，生成可靠的、可在浏览器运行的 Three.js 单文件 HTML 场景。它要求先对参考图进行视觉检查，再开始编写代码。
主要能力
- 在响应中生成简短的分析清单，并将同一清单作为注释块置于脚本顶部。
- 生成一个纯 .html 文件，不使用 React、JSX、iframe 或 srcDoc。
- 仅使用原始几何体：BoxGeometry、CylinderGeometry、ConeGeometry、SphereGeometry、Group 和 MeshStandardMaterial。
- 采用 assets/threejs-scene-template.html 中的 import-map 加载模式。
- 在重建基于网格的场景时，将对象对齐到整数或半整数瓦片坐标。
- 添加柔和阴影、哑光材质，以及无需用户调整即可看到资产的相机视角。
- 当用户报告加载或渲染错误时，优先将 CDN/import 模式与包装器替换为 assets/threejs-scene-template.html 中的健壮纯 HTML 模板。
必需的分析清单 在代码之前，需要总结以下内容：
- 相机与构图：投影感、相机类型、方位角/仰角、裁剪/居中。
- 调色板：参考图中可见的 8-15 种十六进制颜色。
- 地面/台座：网格尺寸、瓦片尺寸、基础厚度、草的变化、水/路径位置。
- 结构：类型、网格位置、占地、高度、墙/屋顶颜色、显著特征。
- 自然：树木、灌木、花朵、岩石、草丛、尺寸变化。
- 农场/细节：作物、楼梯、门、窗、栅栏横杆、小道具。
- 天空/氛围：天空颜色、雾、云/烟。
- 动画：可选旋转、飘动的云、上升的烟、水面微光。
编码规则
- 使用一个自包含的 .html 文件。
- 使用 import map，并完全按照 assets/threejs-scene-template.html 中所示使用 unpkg.com。
- 使用 import * as THREE from 'three' 以及来自 three/addons/controls/OrbitControls.js 的 OrbitControls 进行导入。
- 不要使用 esm.sh、cdn.jsdelivr、相对 Three.js 模块路径、React、JSX、iframe 或 srcDoc。
- 不要使用外部资产、纹理、GLTF、OBJ、FBX、SVG 或后处理。
- 全程使用 MeshStandardMaterial；默认 roughness: 1 和 metalness: 0。
- 设置 renderer.outputColorSpace = THREE.SRGBColorSpace。
- 启用 renderer.shadowMap.enabled = true 和 THREE.PCFSoftShadowMap。
- 添加 resize 监听器。
- 将 renderer.domElement 直接追加到 document.body。
- 注释保持句首大写。
- 除非用户要求更多细节，生成文件保持在约 500 行以内。
使用方式 该技能通过读取参考图像并产出一份分析清单，然后按照上述规则生成单文件 HTML。参考与模板文件的使用方式如下：
- 当用户想要可复用提示词或提示词措辞时，读取 references/reconstruction-prompt.md。
- 使用 assets/threejs-scene-template.html 作为生成 HTML 的起点。
- 仅当快速本地复制模板有用时，使用 scripts/write_scene_from_template.py；之后自定义复制出的文件。
调试不渲染的输出 如果生成的场景不渲染：
- 移除 React、JSX、iframe 和 srcDoc 包装器。
- 将模块导入替换为模板中的 import-map 模式。
- 确认文件通过本地服务器提供，例如 python3 -m http.server 8000，然后在 http://localhost:8000/scene.html 打开。
- 确认 renderer.domElement 被追加到 document.body。
- 确认相机指向资产且对象接近原点。
- 简化动画，直到静态渲染可用。
小屋参考快捷方式 对于裁剪后的小屋参考图，需要重建：
- 一个 5×5 的悬浮草地瓦片岛屿，带棕色泥土底座。
- 前左侧略低于草地水位的水带。
- 一座暖黄色小屋，居中且略靠后偏左。
- 明亮的蓝色四坡屋顶，带深蓝色屋脊/顶盖。
- 一个高烟囱，带四缕上升的烟。
- 一扇棕色前门、带深色边框的青色窗户，以及右侧外部石阶。
- 院子前/右/后方的木栅栏。
- 草丛、小白/黄花、天蓝色背景、柔和阴影和哑光材质。
限制 该技能不使用外部资产、纹理、GLTF、OBJ、FBX、SVG 或后处理，也不使用 React、JSX、iframe、srcDoc 或 esm.sh、cdn.jsdelivr 等导入方式。生成文件需控制在约 500 行以内，除非用户要求更多细节。