栖屿 · Three.js 沉浸式海岛互动体验产品系统Vibe Coding

面向网页端沉浸式体验与三维场景展示，打造一个无需安装、通过浏览器即可访问的海岛空间。用户可以环绕观景、登岛漫步，自由选择时段与天气，体验海浪、植被、木屋和海洋动物构成的动态环境。项目探索了 Web 3D 在休闲互动、文旅场景预览和品牌创意展示中的应用方式。

1. 双模式游览：支持环岛旋转、缩放和自动环绕，也可切换第一人称，在沙滩、木屋与码头区域漫步。
2. 时段与天气：提供清晨、晴午、日落、夜晚，以及晴朗、雨天、雷暴、狂风，可自由组合并平滑切换。
3. 动态海岛：实时呈现海浪、岸边泡沫、木船随浪起伏、植被风动、海鸥飞行与海豚游动。
4. 场景联动：夜晚木屋门窗与暖光联动，天气变化同步影响天空、海面、材质和环境声。
5. 体验设置：提供三档画质、风力调节、环境声开关、隐藏界面和风景图片导出，支持桌面键鼠与移动端触控。

负责三维场景渲染、交互逻辑、环境效果、模型整合及页面适配。项目采用 JavaScript、Three.js、WebGL 与 Vite，使用 GLSL 编写海面着色器，实现波浪、反射折射和泡沫效果，并让船体运动与海面波场保持一致。植物、木屋和木船通过 Blender 脚本建模并导出 GLB，结合 PBR 材质、实例复用、模型压缩和分档画质控制渲染开销。整体可构建为静态站点部署。