一个可直接构建运行的 Three.js 3D 体素自然景观。打开页面即呈现完整山境，并缓慢自动环绕：雪峰、叠层山脉、双级瀑布、高山水潭、林间湖泊、针叶林、山腰云海与晨曦光线。
所有地形、植被、水流、云层和天空均由代码生成。运行时无需下载模型、图片、字体或调用外部服务。
环境：Node.js 20.19+ 或 22.12+，支持 WebGL 2 的现代浏览器。
cd "E:\Aclaw文件\cloudfall-voxel"
npm install
npm run dev打开 **http://127.0.0.1:5178/**。端口固定为 5178；如被其他程序占用，可修改 vite.config.js。
npm run build
npm run preview生产预览地址：**http://127.0.0.1:4178/**。构建产物位于 dist/，可放在静态 HTTP 服务上；使用相对资源路径，支持部署到子目录。请通过 HTTP 服务打开，而不是直接双击 HTML。
- 打开即看全貌：默认晨曦，自动缓慢环绕。鼠标拖拽旋转，滚轮缩放；触屏单指旋转、双指缩放。
- 穿云漫游：点击左侧按钮或顶部导航，进入约 32 秒的镜头路线，穿过云海、掠过山峰，然后自动回到全景。可点击结束或按
Esc返回。 - 光影时刻：晨曦、日落、蓝调三套天空、太阳／月亮、环境光与雾色。
- 云海浓度／林海密度：滑杆直接控制云层透明度和绘制的植被数量；云海设为 0 时关闭云层。
- 自动环绕／暂停：环绕开关控制镜头，底部暂停按钮或空格键可冻结水流、云层与自动镜头。暂停后仍可手动观察。
- 保存画面：右上角相机按钮导出当前三维画面为 PNG，包含当前光影和观察角度。
- 移动端：设置面板默认折叠，初始镜头按竖屏比例自动适配，保留完整山境。
cloudfall-voxel/
├── index.html 界面与可访问性结构
├── package.json 安装、启动、构建、测试脚本
├── package-lock.json 锁定依赖
├── vite.config.js 本地服务与静态构建配置
├── public/favicon.svg
├── docs/ 实际验证记录与预览图
├── src/
│ ├── main.js UI 交互、启动、图片导出
│ ├── landscape.js Three.js 场景、相机、漫游、性能调节
│ ├── terrain.js 多峰高程、断崖与峡谷、外露面、体素植被
│ ├── effects.js 瀑布、水潭、飞溅、云层、天空、光影预设
│ ├── math.js 固定种子随机与连续噪声
│ └── style.css 自适应界面样式
└── tests/browser.mjs 实际 WebGL 浏览器验证
山体保留体素台阶，但剔除内部不可见的面，合并为一个带顶点颜色的地形网格。树木、水面、水幕与粒子通过 InstancedMesh 批量绘制，场景约 2.8 万个外露体素／实例单元，不逐块创建独立 Mesh。界面统计的是这些渲染单元，而非完整实心山体的内部方块。
水幕流动、水滴下落、飞溅和云层漂移由 GPU 着色器计算。阴影为静态地形缓存，仅在光影或林海密度改变后重新生成。默认限制像素倍率，持续低帧率时自动降低渲染分辨率，并在需要时关闭阴影；也可手动选择高画质或流畅优先。后台标签页暂停绘制。
云层是有深度测试的三维实例，山峰可正确遮挡云雾。漫游镜头接近实际云层位置时，空间雾和近景云幕逐渐增强，离开后恢复清晰。
已完成依赖安装、生产构建和 Chrome / WebGL 2 实际运行。浏览器测试覆盖初始全景、持续拖拽旋转、三套光影、云海／林海滑杆、暂停、画质切换、PNG 导出、完整穿云路线和 390 × 844 竖屏布局，无 JavaScript 或 GLSL 错误。
运行检查：
npm test测试自动构建并启动生产预览，在 Windows 上优先使用已安装的 Chrome。其他环境可先执行 npx playwright install chromium，或通过 BROWSER_BIN 指定 Chromium 浏览器路径。测试完成后自动关闭测试浏览器和临时预览服务。
输出在 test-results/：report.json 记录真实 GPU、分辨率、中位 FPS、95% 帧耗时、绘制次数与错误列表，另存全景、晨昏、穿云、手机布局及导出图片。具体性能记录见 验证结果。FPS 取决于实际 GPU、分辨率和浏览器设置。