# 问题
最近在使用 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; | |
} | |
), |
