3.js - Water2不显示水波纹

文中需要的资源，在我的资源那里能下载

【3.js 有2个水的生成方式：Water、Water2】

注意： 这个问题，是基于 Water2的

如下方式，不显示波纹

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'

// 导入water
import { Water } from 'three/examples/jsm/objects/Water2.js'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(5, 5, 5)
scene.add(camera)

const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)

// --------------------------------------------------------------------------

// THREE.PlaneGeometry：平面网格，尺寸是20*20，并指定u和v方向的细分数量是1024、1024
const water = new Water(new THREE.PlaneGeometry(1, 1, 1024, 1024), {
  color: '#ffffff',
  scale: 1,
  flowDirection: new THREE.Vector2(1, 1),
  textureHeight: 1024,
  textureWidth: 1024,
})
water.rotation.x = -Math.PI / 2
scene.add(water)

// --------------------------------------------------------------------------

// 环境光
const light = new THREE.AmbientLight(0xffffff)
light.intensity = 10
scene.add(light)
// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
scene.add(directionalLight)

// 初始化渲染器
const renderer = new THREE.WebGLRenderer()
/*
  最新版本属性名字有改变：
    渲染器属性名`.outputEncoding`已经变更为`.outputColorSpace`
*/
renderer.outputEncoding = THREE.sRGBEncoding // 设置渲染器的输出编码方式（此API已弃用）
// renderer.outputColorSpace = THREE.SRGBColorSpace // 设置渲染器的输出编码方式（此API已启用）
renderer.toneMapping = THREE.ACESFilmicToneMapping
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true

const animate = () => {
  // controls.update()
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
}
animate()

window.addEventListener('resize', () => {
  // 重置相机的宽高比
  camera.aspect = window.innerWidth / window.innerHeight
  // 更新相机的投影矩阵
  camera.updateProjectionMatrix()
  // 重置渲染器的宽高比
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 更新渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio)
})

为什么没有呢？

原因：
源码中是：
const normalMap0 = options.normalMap0 || textureLoader.load( ‘textures/water/Water_1_M_Normal.jpg’ )。同理normalMap1。
但是，
我们项目安装的three.js源码并没有这个两个纹理图片，
所以，不会显示水波纹

解决办法

把这两个纹理图片，放到 【three-01\public\textures\water】 目录下，这样源码就能找到这两个图片了，就有水波纹了
如下图，

下面是正确的代码

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'

// 导入water
import { Water } from 'three/examples/jsm/objects/Water2.js'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(5, 5, 5)
scene.add(camera)

const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)

// --------------------------------------------------------------------------

// THREE.PlaneGeometry：平面网格，尺寸是20*20，并指定u和v方向的细分数量是1024、1024
const water = new Water(new THREE.PlaneGeometry(1, 1, 1024, 1024), {
  color: '#ffffff',
  scale: 1,
  flowDirection: new THREE.Vector2(1, 1),
  textureHeight: 1024,
  textureWidth: 1024,
  normalMap0: new THREE.TextureLoader().load('../public/textures/water/Water_1_M_Normal.jpg', texture => {
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping
  }), // 水的纹理，不加就是个平面，没有动态的
  normalMap1: new THREE.TextureLoader().load('../public/textures/water/Water_2_M_Normal.jpg', texture => {
    texture.wrapS = texture.wrapT = THREE.RepeatWrapping
  }) // 水的纹理，不加就是个平面，没有动态的
})
water.rotation.x = -Math.PI / 2
scene.add(water)

// --------------------------------------------------------------------------

// 环境光
const light = new THREE.AmbientLight(0xffffff)
light.intensity = 10
scene.add(light)
// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5)
scene.add(directionalLight)

// 初始化渲染器
const renderer = new THREE.WebGLRenderer()
/*
  最新版本属性名字有改变：
    渲染器属性名`.outputEncoding`已经变更为`.outputColorSpace`
*/
renderer.outputEncoding = THREE.sRGBEncoding // 设置渲染器的输出编码方式（此API已弃用）
// renderer.outputColorSpace = THREE.SRGBColorSpace // 设置渲染器的输出编码方式（此API已启用）
renderer.toneMapping = THREE.ACESFilmicToneMapping
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true

const animate = () => {
  // controls.update()
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
}
animate()

window.addEventListener('resize', () => {
  // 重置相机的宽高比
  camera.aspect = window.innerWidth / window.innerHeight
  // 更新相机的投影矩阵
  camera.updateProjectionMatrix()
  // 重置渲染器的宽高比
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 更新渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio)
})