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
three js Water2 不展示波纹_第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;
    }
  ), //水的纹理   不加 就是个平面,没有动态的

完整代码为:

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项目),这样源码也能找到这两个图片了。
three js Water2 不展示波纹_第2张图片

你可能感兴趣的:(1024程序员节)