Designs interactive WebGL wate…

# Three.js 船舶浮力模拟 Demo 实现方案

一、技术架构

• Three.js（r150+，ES Module 方式引入）
• 核心模块：海面（着色器波浪）、浮力计算、浪花粒子、轨道控制器
• 性能目标：48fps+，通过合并几何、限制粒子数、按需更新实现

二、海面波浪（顶点着色器）

• 用 PlaneGeometry（建议 128×128 段，尺寸约 100×100）+ ShaderMaterial
• 顶点着色器叠加 2~3 层 Gerstner 波（比正弦波更真实的卷浪形态）：
• 不同方向、波长、振幅、相速度， uniforms 传入 uTime
• 法线用偏导数解析计算，保证光照正确
• 片元着色器：菲涅尔反射 + 深浅颜色渐变 + 高光，可用简单噪声做泡沫白边

三、浮力模拟（船体随波起伏）

• 船用 BoxGeometry/简单船形 ExtrudeGeometry 即可
• 关键算法：
• 在 CPU 端复刻着色器中的 Gerstner 波函数，采样船头、船尾、左舷、右舷 4 个点的水面高度
• 取平均高度作为目标 y，用弹簧-阻尼模型平滑跟随：vy += (targetY - y) * k * dt - damping * vy
• 根据左右/前后采样点高度差计算 pitch（纵倾）与 roll（横倾），用插值平滑
• 这样船体姿态与 GPU 波浪完全一致，视觉上“贴合”水面

四、浪花粒子

• 用 THREE.Points + BufferGeometry，粒子数控制在 300~800（区间，按机器性能调整）
• 粒子生命周期：在船体与水面冲击点（船艏）随机发射，初速度向上+随机横向，受重力下落，落到水面附近销毁
• 材质：加法混合（AdditiveBlending）的白色圆形贴图或着色器圆点，透明度随生命周期衰减
• 用对象池复用粒子，避免频繁创建销毁导致 GC 卡顿

五、交互与性能优化

• OrbitControls 实现鼠标拖拽旋转、滚轮缩放，限制 polar angle 防止钻入水下
• 性能保障：
• renderer.setPixelRatio(Math.min(devicePixelRatio, 2))
• 波浪网格段数不宜过高（128×128 足够）；开启 powerPreference: 'high-performance'
• 用 requestAnimationFrame + delta time 保证帧率无关运动
• 移动端可降级粒子数与网格分辨率
• 可加简易 FPS 显示（stats.js）验证 48fps+

六、文件结构建议

• index.html：容器 + importmap
• main.js：场景初始化、渲染循环
• water.js：波浪 shader（顶点/片元字符串）
• buoyancy.js：CPU 端波浪采样与船体姿态
• splash.js：粒子系统

核心难点是 CPU/GPU 波浪函数保持一致——只要采样函数与 shader 公式相同，船体起伏就会非常自然。