three.js模拟波动水面Water.js

有些数字孪生场景周围的环境，需要模拟一个波动水面效果，自己写shader相对比较麻烦，采用threejs的扩展库更简单方便。

3D在线体验效果 (货轮物流)

视频讲解思路

引入扩展库Water.js

import { Water } from 'three/examples/jsm/objects/Water.js';

创建Water水面模型对象

创建一个矩形平面表示水面，水面的法线贴图地址在官网案例examples里面examples\textures\waternormals.jpg，法线贴图功能是模拟水面波浪的凹凸效果。

const waterGeometry = new THREE.PlaneGeometry(10000, 10000);
const water = new Water(
    waterGeometry,
    {
        textureWidth: 512,
        textureHeight: 512,
        waterNormals: new THREE.TextureLoader().load('./waternormals.jpg', function (texture) {
            texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
        }),
        sunDirection: new THREE.Vector3(),
        sunColor: 0xffffff,
        waterColor: 0x001e0f,
        distortionScale: 3.7, 
    }
);
water.rotation.x = - Math.PI / 2;
scene.add(water)

水面波动动画

如果你想水面产生波动的动画效果，需要在动画循环中，改变uniform变量time

function render() {
    water.material.uniforms["time"].value += 1.0 / 60.0;
    requestAnimationFrame(render)
}
render()