注意: 本问题都是基于 Water2 !!! (three 有2个水的生成方式。Water Water2)
1、问题描述
如下方式写 ,不会展示波纹。
const waterGeometry = new THREE.PlaneGeometry(1000, 1000);
const water2 = new Water2(waterGeometry, {
flowDirection: new THREE.Vector2(1, -1), //流动方向
reflectivity: 0.3,
});
water2.position.set(500, 2, 0);
// 水面旋转至水平
water2.rotation.x = -Math.PI / 2;
scene.add(water2);
且控制台会报错:
二、解决办法 - No.1
就去看了Water2的类型定义,经探究,发现补上这俩属性就行展示了。normalMap0 、normalMap1
normalMap0: new THREE.TextureLoader().load(
"texture/main-14/water.jpeg",
texture => {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
}
), //水的纹理 不加 就是个平面,没有动态的
normalMap1: new THREE.TextureLoader().load(
"texture/main-14/water.jpeg",
texture => {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
}
), //水的纹理 不加 就是个平面,没有动态的
完整代码为:
const waterGeometry = new THREE.PlaneGeometry(1000, 1000);
const water2 = new Water2(waterGeometry, {
flowDirection: new THREE.Vector2(1, -1), //流动方向
normalMap0: new THREE.TextureLoader().load(
"texture/main-14/water.jpeg",
texture => {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
}
), //水的纹理 不加 就是个平面,没有动态的
normalMap1: new THREE.TextureLoader().load(
"texture/main-14/water.jpeg",
texture => {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
}
), //水的纹理 不加 就是个平面,没有动态的
reflectivity: 0.3,
// 以下非必要属性
// textureWidth: 32, // -这个跟 normals有关系,就是这个纹理图片的宽高。此数据的变动,会导致水波纹的长宽变动
// textureHeight: 1024,//同上
// scale: 1,// 物体倒影分散度
});
water2.position.set(500, 2, 0);
// 水面旋转至水平
water2.rotation.x = -Math.PI / 2;
scene.add(water2);
三、为什么呢?到底为什么?
而且官网的Water2的案例 也没有加normalMap0 、normalMap1。也能实现透明的波动效果
原因:
源码中是:const normalMap0 = options.normalMap0 || textureLoader.load( ‘textures/water/Water_1_M_Normal.jpg’ )。同理normalMap1. 但是我们项目 安装的 three源码并没有这个两个纹理图片。
所以可以通过手动给这两个属性赋值 (解决办法 - No.1)。。
另一种方式是,直接将这两个图片放在:public/textures/water目录下(react项目),这样源码也能找到这两个图片了。