水面効果を実現したThreejs

1. 水の波紋の効果を実現するには:
   
2. 幾何学的形状を追加することにより、プラットフォームの形状を次のようにすることができます。

   const waterGeometry = new THREE.PlaneGeometry( 10000, 10000 );

3. ウォータープラグインを導入し、水のマテリアルを変更します。

   import { Water } from 'three/addons/objects/Water.js';
   
   const water = new Water(
   	waterGeometry,
   	{
   		textureWidth: 512,
   		textureHeight: 512,
   		waterNormals: new THREE.TextureLoader().load( 'textures/waternormals.jpg', function ( texture ) {
   			texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
   		} ),
   		sunDirection: new THREE.Vector3(),
   		sunColor: 0xffffff,
   		waterColor: 0x001e0f,
   		distortionScale: 3.7,
   		fog: scene.fog !== undefined
   	}
   );
   
   // 加入场景中
   scene.add( water );

4. 水面に使用されるテクスチャ マップ