three.js water-水

three.js中库中有 js/objects/Water.js 和 js/objects/Water2.js的插件。

有几个案例：webgl_shaders_ocean。使用water.js插件制作的海洋，效果不错。

 插件的使用也非常方便，geometry采用的是plane，设置了纹理，以及光源的位置向量。

var waterGeometry = new THREE.PlaneBufferGeometry( 1000, 1000 );

water = new THREE.Water(
    waterGeometry,
    {
        textureWidth: 512,
        textureHeight: 512,
        waterNormals: new THREE.TextureLoader().load( '../img/waternormals.jpg', function ( texture ) {

            texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

        } ),
        alpha: 1.0,
        sunDirection: light.position.clone().normalize(),
        sunColor: 0xffffff,
        waterColor: 0x001e0f,
        distortionScale: 13.7,
        fog: scene.fog !== undefined
    }
);

water.rotation.x = - Math.PI / 2;
water.position.y = -10;
scene.add( water );

在循环中更新time产生动态效果，water.material.uniforms.time.value += 1.0 / 60.0; 

官网还有一个水的案例，水上面的球体可以随着水波流动。

https://threejs.org/examples/?q=water#webgl_gpgpu_water