three js Water2 不展示波纹

注意： 本问题都是基于 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项目)，这样源码也能找到这两个图片了。