可交互的体素骑士篝火场景

你是一名资深创意 WebGL 与 Three.js 开发者。你的任务是使用 Three.js + webgl ，构建一个完整、可用于生产环境的交互式 3D 场景，并将其完全包含在单个独立 HTML 文件（index.html）中。### 1. 视觉主题与艺术指导 - 氛围：深邃的夜间森林、温暖发光的篝火，以及独自疲惫地休息在营地中的骑士（《黑暗之魂》篝火／经典复古 RPG 美学）。 - 美术风格：3D 像素艺术／体素／低多边形风格。 - 着色与后期处理：集成 Three.js 后期处理（RenderPixelatedPass 或同等的低分辨率像素化／抖动效果），呈现真实的 16 位／32 位复古视觉效果。 ### 2. 场景几何体与资产（100% 程序化生成——不使用外部 .gltf/.obj 文件） 所有资产都必须使用 Three.js 几何体基元（BoxGeometry、CylinderGeometry 等）和基础材质程序化构建，使文件能够在本地运行且不会产生 CORS 跨域问题。 1. 森林环境： - 地面：深色风格化地形，包含程序化生成的体素石块、蘑菇和低多边形植被。 - 树木：在空地周围布置程序化生成的松树／云杉或块状树冠树木，营造纵深感和幽闭感。 - 天空与光照：深午夜色天空，点缀闪烁的体素星星，并使用投射柔和阴影的冷色月光 DirectionalLight。 - 景深：使用带深色氛围色的 THREE.FogExp2 融合地平线。 2. 篝火： - 用石头围成圆圈，围住闷烧的木柴和程序化生成的余烬。 - 火焰系统：向上升起的动画像素粒子（Points 或脉动的体素网格）。 - 动态光照：使用暖橙红色 PointLight，并通过连续、自然的闪烁逻辑（使用 Math.sin、噪声或伪随机变化）实现动态效果。 3. 骑士： - 使用体素化几何体基元构建层级场景图（为头部、躯干、上臂／前臂、腿部、披风和剑分别设置组）。 - 视觉细节：带面甲缝隙的头盔、胸甲、肩甲、护手，以及剑鞘／长剑。 - 枢轴点必须在关节处正确对齐（肩部、肘部、髋部、膝部），以实现平滑的程序化旋转动画。 ### 3. 骑士交互状态机 在渲染循环中使用线性插值（lerp）或三角函数曲线，实现以下可选择状态的平滑程序化动画： - 坐在篝火旁（默认待机）：盘腿或蹲坐，配合细微的呼吸循环，在火焰旁暖手。 - 添柴：骑士起身，取来一根木柴并将其扔进火中。火焰明显蹿高，光照半径暂时扩大，并迸发出一阵火星。 - 练剑：骑士起身、拔剑，完成一套干净利落的三段式攻击／格挡动作，最后回到战斗戒备姿态。 - 遥望远方：走到空地边缘，将剑插入地面，披风随风摆动，凝视黑暗中的远方。 - 睡觉：躺在篝火旁的铺盖卷上，头盔上方升起漂浮的动画像素“Z z z”粒子。 - 烤肉：手持一根插着食物的木棍，将食物置于火焰上方，并产生细微的程序化烟雾／蒸汽粒子。 ### 4. 摄像机系统 提供带平滑过渡插值的预设镜头切换（对位置和目标点进行插值）： - 温馨特写：中景，聚焦骑士和篝火的光芒。 - 等距 RPG：经典的高位 45 度战术俯视镜头，展示整片空地。 - 电影感低机位：低角度戏剧性镜头，向上仰拍星空和松树树冠前的骑士。 - 自由环绕：无缝切换到标准 OrbitControls，以便交互式查看场景。 ### 5. UI 与音频 - UI 风格：复古 8 位／16 位 RPG HUD 布局，使用带半透明深色边框的面板、像素化边框，并嵌入 Google 字体（例如“Press Start 2P”）。 - 底部面板：可交互的动作按钮，用于触发骑士的各个状态。 - 右上角面板：用于切换镜头角度的按钮。 - 木柴计数器：记录已添加的木柴数量和当前火焰强度。 - 音效（Web Audio API）：程序化合成篝火噼啪声和夜间微风／蟋蟀环境音，并提供静音／取消静音切换按钮。 ### 6. 技术规格 - 单个、自包含的 index.html 文件。 - 使用通过 CDN（https://t.co/W8o3SZwkCj 或 unpkg）加载的 ES Modules。 - 采用模块化、注释完善的代码结构（initScene、buildEnvironment、buildKnight、buildCampfire、setupUI、setupAudio、animate）。 - 完整支持窗口大小变化处理，更新摄像机宽高比和像素化后期处理通道的分辨率。