three js Water2 不展示波纹

最新推荐文章于 2024-09-04 18:05:32 发布

这个昵称也不能用吗？

最新推荐文章于 2024-09-04 18:05:32 发布

阅读量453

点赞数 1

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/qq_37766810/article/details/134017513

版权

文章讲述了在使用Three.js的Water2组件创建动态水面时遇到的问题，即缺少normalMap0和normalMap1纹理导致的静态效果。解决方法包括手动添加纹理或放置在项目的特定目录下。

摘要由CSDN通过智能技术生成

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