3.js -- 添加水波纹的平面

案例 - 1

案例 - 1 - 源码

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'
import gsap from 'gsap'

// 导入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(0, 0, 20)
scene.add(camera)

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

const rgbeLoader = new RGBELoader()
rgbeLoader.loadAsync('../public/assets/2k.hdr').then(texture => {
	texture.mapping = THREE.EquirectangularReflectionMapping
	scene.background = texture
	scene.environment = texture
})

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

const gltfLoader = new GLTFLoader()
gltfLoader.load('./assets/model/newyears_min.glb', gltf => {
	console.log('gltf=', gltf)
	scene.add(gltf.scene)
	
	// 创建水面
	let waterGeometry = new THREE.PlaneGeometry(100, 100)
	let water = new Water(waterGeometry, {
	scale: 4,
	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.position.y = 1
	water.rotation.x = -Math.PI / 2 // 你可以注掉看看，会是一个竖着的平面
	scene.add(water)
})

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

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

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

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)
})

---

---

---

案例 - 2

案例 - 2 - 源码

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 rgbeLoader = new RGBELoader()
rgbeLoader.loadAsync('../public/assets/050.hdr').then(texture => {
	texture.mapping = THREE.EquirectangularReflectionMapping
	scene.background = texture
	scene.environment = texture
})

const gltfLoader = new GLTFLoader()
gltfLoader.load('../public/assets/model/yugang.glb', gltf => {
	console.log('gltf=', gltf)
	
	const yugang = gltf.scene.children[0]
	// @ts-ignore
	yugang.material.side = THREE.DoubleSide
	
	// @ts-ignore
	const waterGeometry = gltf.scene.children[1].geometry
	const water = new Water(waterGeometry, {
		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
		}) // 水的纹理，不加就是个平面，没有动态的
	})
	
	scene.add(water)
	scene.add(yugang)
})

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

// 环境光
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)
})