请用 Three.js 写一个单文件 HTML 的 3D 交互场景，主题为“氛围感森林小屋”。要求代码完整、可直接保存为...

Prompt

请用 Three.js 写一个单文件 HTML 的 3D 交互场景，主题为“氛围感森林小屋”。要求代码完整、可直接保存为 .html 运行，不省略关键部分；除 Three.js 与 OrbitControls 的 CDN 外，不加载任何外部模型、图片、纹理、字体或音频。所有模型、材质、纹理、粒子、天空、雾效、灯光、动画均程序化生成。若需要木纹/石纹，可用 CanvasTexture 程序化绘制，但不得使用外部图片。 一、整体目标 营造深夜森林深处一座孤独小木屋的电影感氛围：冷蓝夜色与木屋暖黄灯光形成强烈冷暖对比；画面低饱和、柔和、神秘、安静、略带童话感；有薄雾、月光、体积光感、萤火虫、烟囱轻烟和轻微动态。不要明亮白天，不要卡通低幼风，不要空旷平淡，不要过曝。 二、技术栈与结构 1. 使用 Three.js CDN，配合 OrbitControls。 2. 单文件 HTML，包含 <style>、<script type="module"> 或普通 script 均可，但必须可运行。 3. 使用 requestAnimationFrame 动画循环。 4. 代码按模块/函数组织，例如 CONFIG、init、createSky、createGround、createCabin、createTrees、createProps、createLights、createFog、createParticles、createSmoke、setupPostprocessing、animate、onResize。 5. 关键参数集中到 CONFIG 对象，便于调整：雾浓度、灯光强度、粒子数量、相机初始位置、Bloom 强度、动画速度。 6. 加中文注释，说明每个主要部分作用。 7. 响应式适配窗口大小，限制 devicePixelRatio 不超过 2。 8. 性能优先：复用几何体与材质，粒子使用 Points/Sprite，树木数量适中，避免过多 draw call；保证中低端设备也能流畅。 三、相机与交互 1. 初始相机位于木屋斜前方稍高处，能同时看到木屋正面、窗户暖光、门廊、烟囱、周围树木和部分星空。 2. OrbitControls 支持鼠标左键旋转、滚轮缩放、右键平移；限制旋转角度与缩放距离，避免穿地或飞到奇怪位置。 3. 相机目标点略高于木屋中部，画面构图偏电影感。 4. 可加入非常轻微的自动缓慢环绕或呼吸式相机漂移，但不要影响用户操作；用户操作时暂停自动运动。 四、天空与远景 1. 深蓝到墨蓝渐变夜空，可用大球体 ShaderMaterial 或顶点色实现渐变。 2. 月亮：发光圆盘或 Sprite，带柔和光晕，位置偏侧上方。 3. 星空：随机分布的小星点粒子，大小略有差异，部分星星轻微闪烁。 4. 远景森林剪影：用低多边形深色树木/山形轮廓围合场景，增强纵深，避免背景空洞。 5. 天空整体不要太亮，保持夜晚氛围。 五、地面与森林环境 1. 地面有轻微起伏，不要完全平面；材质为深绿、苔藓绿、泥土棕混合，可程序化噪声或顶点色。 2. 木屋周围有苔藓、草地、碎石、小土路；小路从画面近处通向木屋台阶，用不规则石块/鹅卵石程序化排布。 3. 随机散布石块、倒木、树桩、蘑菇、蕨类/低矮草丛，增加细节但不要挡住主体。 4. 树木分松树与阔叶树两类： - 松树：圆柱/锥形树干，多层圆锥树冠，深绿色，层层错落。 - 阔叶树：树干略弯曲，树冠由多个低多边形球体/二十面体组合。 5. 树木高低错落，近景、中景、远景都有；靠近木屋处留出空地，避免穿模和遮挡门窗。 6. 树冠可做非常轻微的摆动动画，幅度要小，像夜风轻拂。 7. 地面边缘用雾和暗色森林收边，不要出现明显场景边界。 六、木屋细节 1. 木屋主体：原木墙体，可用多根水平圆柱/方木堆叠，体现原木纹理和缝隙；墙体颜色为深棕、灰棕，低饱和。 2. 屋顶：双斜坡屋顶，木板排列，边缘略不规则；屋顶有厚度，有屋檐阴影。 3. 石基：木屋底部有粗糙石块基座，石块大小不一，深灰色带苔藓色。 4. 烟囱：石砌或木石混合烟囱，位于屋顶一侧，顶部有轻烟粒子上升并逐渐消散。 5. 门：木门带门框、门把手，门上方或门侧有小灯/灯笼，发出暖黄光。 6. 窗户：至少两扇窗，窗框木质，窗内透出温暖黄光；可用发光平面/材质加室内点光源模拟，窗光在门前地面形成暖色光斑。 7. 门廊：有木质门廊、栏杆、支撑柱；台阶 2-3 级，石块或木板均可。 8. 小屋周围细节：靠墙木柴堆、小木桶、灯笼、花盆/苔藓石、门口地垫或小石块。细节适量，不要杂乱。 9. 木屋比例真实，门窗不要悬空或穿模；屋顶与墙体衔接自然。 七、灯光与氛围 1. 基础光：低强度环境光 + 冷色半球光，保证暗部不死黑。 2. 月光：冷蓝方向光从侧上方照下，形成柔和阴影；阴影贴图分辨率适中，避免性能过重。 3. 木屋暖光：窗口点光源、门廊灯点光源、室内暖色点光，颜色偏橙黄，强度柔和，避免过曝。 4. 聚光灯：可在门廊或窗户方向加入暖色聚光灯，形成体积光/光柱感；也可用半透明锥体/平面加 AdditiveBlending 模拟光柱。 5. 雾：使用 FogExp2 或线性雾，深蓝灰色，浓度适中；地面附近叠加低透明薄雾平面或粒子雾，缓慢流动。 6. 整体色调：冷蓝夜空/森林 + 暖黄窗光，低饱和、电影感；亮部不过曝，暗部保留细节。 7. 可加入非常轻微的颜色分级感，通过灯光颜色、雾色和 Bloom 实现，不要依赖外部 LUT。 八、粒子与动画 1. 萤火虫：黄色/暖绿色小粒子，在木屋周围和树林间缓慢漂浮，位置随机游走，亮度呼吸式闪烁；数量适中，不要满屏。 2. 烟囱烟雾：灰色半透明粒子从烟囱口持续上升，逐渐变大、变淡、消散；速度缓慢自然。 3. 雾气：地面薄雾缓慢横向流动，透明度很低，层次柔和。 4. 星星闪烁：部分星星亮度轻微变化。 5. 树冠/树叶微动：用轻微旋转或顶点动画实现，幅度小。 6. 窗光/灯笼光轻微呼吸闪烁，模拟火光，但频率低、幅度小。 7. 所有动画基于时间 delta 或 clock，保证不同帧率速度一致。 九、后处理与画面 1. 可选加入 EffectComposer + UnrealBloomPass 实现柔和辉光，重点让窗口、灯笼、月亮、萤火虫有轻微 Bloom。 2. Bloom 强度适中，不要糊成一片；整体画面清晰、有层次。 3. 可加入轻微暗角/色调映射，使用 ACESFilmicToneMapping，曝光适中。 4. 画面要有前景（石块/草丛）、中景（木屋）、背景（森林/雾/星空）三层纵深。 十、性能与稳定性 1. 限制 devicePixelRatio <= 2。 2. 粒子数量、树木数量、阴影分辨率要适中；阴影只给主要光源启用。 3. 复用几何体与材质；粒子用 BufferGeometry/Points。 4. 窗口 resize 时更新相机、渲染器、后期 composer。 5. 代码不能报错，所有变量定义完整；Three.js 版本与 OrbitControls/后处理模块匹配。 6. 若后处理影响兼容性，可提供降级方案：无 Bloom 也能正常显示。 十一、输出要求 请输出完整 HTML 代码，包含所有 CSS、JS、CDN 引入和初始化逻辑；不要只给片段，不要省略动画循环、resize、灯光、粒子、木屋构建等关键部分。代码要能直接复制保存运行。若代码过长，可分段输出，但最后必须给出完整可运行版本。 负面要求：不要使用外部图片/模型/纹理；不要明亮日光；不要卡通低幼风；不要画面过曝；不要木屋穿模；不要树木挡住门窗；不要满屏粒子；不要明显场景边界；不要 UI 文字面板；不要自动播放音乐；不要依赖需要构建工具的 npm 写法。

A system prompt was added to support web rendering