three.js实现贴图的倒影效果

使用three.js实现贴图的倒影效果可以通过以下步骤实现：

1. 创建一个场景和相机

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

2. 创建一个平面几何体，并设置其位置和旋转，同时为其添加一个材质（使用图片贴图）和一个网格

const geometry = new THREE.PlaneGeometry(2, 2);
const texture = new THREE.TextureLoader().load('path/to/texture.jpg');
const material = new THREE.MeshBasicMaterial({map: texture});
const plane = new THREE.Mesh(geometry, material);
plane.position.y = -1;
plane.rotation.x = -Math.PI / 2;
scene.add(plane);

3. 创建一个渲染器，并将其添加到DOM元素中

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

4. 创建一个渲染目标，并将其设置为平面几何体的材质的map属性

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

5. 创建一个镜像相机，并将其放置在平面几何体的下方

const mirrorCamera = new THREE.CubeCamera(0.1, 10, 256);
mirrorCamera.position.set(0, -1, 0);
scene.add(mirrorCamera);

6. 将场景中的物体渲染到渲染目标中，并将镜像相机的renderTarget设置为渲染目标

mirrorCamera.update(renderer, scene);

7. 将渲染目标渲染到屏幕上

renderer.render(scene, camera);

完整代码如下：

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const geometry = new THREE.PlaneGeometry(2, 2);
const texture = new THREE.TextureLoader().load('path/to/texture.jpg');
const material = new THREE.MeshBasicMaterial({map: texture});
const plane = new THREE.Mesh(geometry, material);
plane.position.y = -1;
plane.rotation.x = -Math.PI / 2;
scene.add(plane);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

const mirrorCamera = new THREE.CubeCamera(0.1, 10, 256);
mirrorCamera.position.set(0, -1, 0);
scene.add(mirrorCamera);

mirrorCamera.update(renderer, scene);

renderer.render(scene, camera);