three.js实现水面倒影效果

实现水面倒影效果可以使用three.js提供的RenderTarget和Mirror对象。具体实现步骤如下：

1. 创建一个RenderTarger对象，将场景渲染到该对象中，用于生成水面倒影纹理。

const renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight);

2. 创建一个Mirror对象，将其放置在水面下方，用于展示水面倒影效果。

const mirror = new THREE.Mirror(renderer, camera, { clipBias: 0.003, textureWidth: window.innerWidth, textureHeight: window.innerHeight });
mirror.position.y = -5;
scene.add(mirror);

3. 将RenderTarger对象的纹理作为Mirror对象的材质贴图。

mirror.material.uniforms.mirrorSampler.value = renderTarget.texture;

4. 在渲染场景时，先将相机沿着水面法线翻转，再将场景渲染到RenderTarger对象中。

const mirrorPlane = new THREE.Plane();
mirrorPlane.setFromNormalAndCoplanarPoint(new THREE.Vector3(0, 1, 0), mirror.position);
const mirrorMatrix = new THREE.Matrix4();
mirrorMatrix.makeRotationX(-Math.PI / 2);
mirrorMatrix.setPosition(mirror.position);
const reflectCamera = camera.clone();
reflectCamera.position.applyMatrix4(mirrorMatrix);
reflectCamera.lookAt(mirror.position.clone().add(mirrorPlane.normal));
renderer.setRenderTarget(renderTarget);
renderer.render(scene, reflectCamera);
renderer.setRenderTarget(null);

完整代码如下：

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.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

const planeGeometry = new THREE.PlaneGeometry(100, 100, 1, 1);
const planeMaterial = new THREE.MeshBasicMaterial({ color: 0x777777, side: THREE.DoubleSide });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2;
plane.position.y = -5;
scene.add(plane);

const renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight);

const mirror = new THREE.Mirror(renderer, camera, { clipBias: 0.003, textureWidth: window.innerWidth, textureHeight: window.innerHeight });
mirror.position.y = -5;
scene.add(mirror);

const mirrorPlane = new THREE.Plane();
mirrorPlane.setFromNormalAndCoplanarPoint(new THREE.Vector3(0, 1, 0), mirror.position);
const mirrorMatrix = new THREE.Matrix4();
mirrorMatrix.makeRotationX(-Math.PI / 2);
mirrorMatrix.setPosition(mirror.position);
const reflectCamera = camera.clone();
reflectCamera.position.applyMatrix4(mirrorMatrix);
reflectCamera.lookAt(mirror.position.clone().add(mirrorPlane.normal));

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.setRenderTarget(renderTarget);
  renderer.render(scene, reflectCamera);
  renderer.setRenderTarget(null);

  mirror.visible = false;
  renderer.render(scene, camera);
  mirror.visible = true;
}

animate();

注意，Mirror对象需要用到Mirror.js和MirrorShader.js两个文件，可以在three.js官网的examples/js/objects目录下找到。