沉浸式 3D 稻田网站

构建一个可在浏览器中运行的沉浸式 3D 稻田网站，主题为： “一片绿色的海洋 / 风吹过稻田。” 完成代码，安装必要的依赖并启动预览。不要停留在提案或实现计划阶段。 1. 视觉方向 整体氛围应自然、宁静而精致，像一个艺术指导统一的互动景观网站。 场景应包含： 前景：清晰可辨的细长叶片、弯曲的茎秆，以及少量低垂的稻穗。 中景：向远处延伸的连续稻田，植株密度充足，间距自然且富有变化。 背景：不规则的林带、层叠的低矮山丘，以及 subtle 的大气透视效果。 天空：柔和的灰蓝色调、细微的云层变化，以及地平线处自然的过渡。 将默认相机放置在略高于稻穗的位置，横向望向稻田和远处的山丘。 天空约占画面的三分之一，构图以稻田为主体。 植被主要使用深绿色、橄榄绿和黄绿色。避免使用荧光绿。 自然改变稻株的高度、朝向、弯曲程度和颜色。 2. 动画要求 风必须表现为横向穿过稻田、连续传播的波浪： 根部基本保持固定，向叶尖和稻穗方向逐渐增强位移。 同一区域的植株应保持协调运动，同时保留个体差异。 将缓慢的大范围风浪与细微的局部扰动结合起来。 避免所有植株完全同步摇摆。不要整体平移植株，也不要让叶片闪烁。 默认风力应轻柔，长时间观看也保持舒适。 3. 交互要求 提供能够真正影响场景的简单控件： 风速滑块：平滑调节风动画的强度和速度。 光照模式：清晨、下午和黄金时刻。协调调整天空、光照方向、色温和雾色。 视角模式：开阔稻田和稻田之间，并提供平滑的相机过渡。 暂停/继续：暂停和继续环境动画。 鼠标移动可以产生非常细微的相机响应，但不应造成眩晕。 默认情况下不要让相机持续进行大角度旋转。 4. 界面设计 使用全屏场景，并在其上叠加界面： 左上角：小尺寸的 VERDANT 字标。 左下角：衬线标题“一片绿色的海洋。” 标题下方：较小的副标题“无事可做，只需跟随微风。” 右下角：紧凑的半透明深绿色控制面板。 确保文字清晰易读，留出充足间距，避免控件遮挡主要景观。 在窄屏上控件也必须保持可用，且不得相互重叠。 5. 技术与性能 使用 Three.js。如果已有项目，请保留其构建环境。 使用实例化和 GPU 顶点动画处理大量植被。 避免为每株植物创建独立的绘制对象，也不要在每一帧通过 CPU 更新所有植株。 随着距离增加降低植被细节，并设置合理的像素比上限。 优先使用程序化几何体和材质，确保资源加载可靠。 场景必须实时渲染。不要使用完整的景观图片或视频作为主场景。 模型名称和对比标签将在后期制作中添加；不要将其包含在场景内。 6. 完成标准 实现完成后，使用可用的浏览器工具验证以下内容： 初始视图能够正确渲染，控制台没有明显错误。 每个控件都确实能够影响场景。 前景、中景和背景具有清晰可辨的景深与层次。 稻株不能只是简单的竖直绿色线条。 风的运动应连续且自然，不能出现明显的整齐重复。 相机过渡应平滑，界面在窄屏上仍保持可用。 如果无法执行某项检查，请明确说明。 最后提供启动说明，并总结实际实现的功能。