使用Three.js绘制快速而逼真的水

在Three.js中绘制一个逼真的水面效果通常需要使用水波动画和复杂的材料设置。以下是一个简化版的例子，展示了如何使用Three.js创建一个基本的逼真水面效果：

import * as THREE from 'three';
import { Water } from 'three/examples/jsm/objects/Water';
 
// 设置场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建水面参数
const geometry = new THREE.PlaneGeometry(100, 100);
const material = new THREE.WaterMaterial({
    textureWidth: 512,
    textureHeight: 512,
    waterNormals: new THREE.TextureLoader().load('path/to/normalMap.jpg', function (texture) {
        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
        texture.offset.set(0, 0.001);
        texture.repeat.set(8, 8);
    }),
    alpha: 1.0,
    sunColor: 0xffffff,
    sunDirection: new THREE.Vector3(0.5, 0.5, 1),
    waterColor: 0x007fff,
    distortionScale: 50.0,
    fog: scene.fog !== undefined
});
 
const water = new Water(geometry, material);
water.rotation.x = -Math.PI / 2;
scene.add(water);
 
// 添加灯光
const directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
 
camera.position.z = 10;
 
function animate() {
    requestAnimationFrame(animate);
 
    // 更新水面的波动
    material.uniforms.time.value += 0.005;
 
    renderer.render(scene, camera);
}
 
animate();

在这个例子中，我们创建了一个WaterMaterial材料，并设置了水的正常贴图、太阳颜色和方向、水的颜色以及扭曲尺度。然后我们添加了一个定向光源来模拟光线对水面的影响。最后，在animate函数中，我们通过改变材料上的time.value属性来模拟水波的动态效果。

请注意，这个例子需要Three.js的Water例子代码，通常可以在Three.js的examples/jsm/objects/Water.js找到。同时，normalMap.jpg是一个水面正常贴图，你需要替换成实际的纹理文件路径。