问题

最近在使用threejs自带的Water方法时，发现如何配置都无法产生水流效果。

threejs版本：

"three": "^0.167.0"

配置如下：

const waterGeometry = new THREE.CircleGeometry(300, 64)
const water = new Water(waterGeometry, {
  textureWidth: 1024,
  textureHeight: 1024,
  color: 0xeeeeff,
  flowDirection: new THREE.Vector2(1, 1),
  scale: 1
})
water.rotation.x = -Math.PI / 2
water.position.y = 0
scene.add(water)

解决办法：

方式1：

public目录下需要引入water的纹理素材【threejs中的example拷贝过来即可】，保证目录结构与源码一致。

目录结构如下：

public
|---textures
|------water
|---------Water_1_M_Flow.jpg
|---------Water_1_M_Normal.jpg
|---------Water_2_M_Normal.jpg

方式2：

补上这俩属性就行：

  • normalMap0
  • normalMap1
 normalMap0: new THREE.TextureLoader().load(
    "texture/water/Water_1_M_Normal.jpg",
    texture => {
      texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    }
  ),
  normalMap1: new THREE.TextureLoader().load(
    "texture/water/Water_2_M_Normal.jpg",
    texture => {
      texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    }
  ),