曾将 Evan Wallace 的 WebGL Water 演示移植到 WebGPU 的 Yong Su，现在又成功将其带入 Three.js，并加入了几项增强功能。

这个实时水体模拟包含光线追踪反射、折射、焦散和可交互物体。它还支持可配置的水池形状（例如圆角盒子），以及用于探索动态焦散和高光的跟随光源相机模式。物体系统是可扩展的，因此你可以通过定义其渲染着色器、水面位移近似、命中测试和光学描述符，来添加额外的 Three.js 几何体或自定义 3D 模型。

你可以在浏览器中这里体验这个演示。在水面上绘制可产生涟漪，拖动背景可旋转相机，拖动球体可移动它。按 L 调整光照，按 G 切换重力，按空格键暂停或取消暂停。

GitHub 仓库在这里，你也可以点击此链接查看 Evan Wallace 的原始演示。想了解更多 Three.js 水体？Dan Greenheck 发布了他完整的海洋渲染解决方案 Three.js Water Pro 的重大更新。

另外，也来看看 matsuoka_601 的流体 模拟：

相关链接

• click this link
• here
• here

原文链接：https://80.lv/articles/real-time-water-simulation-with-three-js