3.js - Water2不显示水波纹

本文主要是介绍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 = trueconst 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 = trueconst 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)
})