threejs reflector

// threejs reflector 示例代码

// 引入必要的库
import * as THREE from 'three';
import { Reflector } from 'three/examples/jsm/objects/Reflector.js';

// 创建场景、相机和渲染器
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 light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1).normalize();
scene.add(light);

// 创建一个平面作为反射面
const geometry = new THREE.PlaneGeometry(20, 20);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const plane = new THREE.Mesh(geometry, material);
plane.rotation.x = -Math.PI / 2;
scene.add(plane);

// 使用 Reflector 创建反射效果
const reflector = new Reflector(plane.geometry, {
    textureWidth: window.innerWidth * window.devicePixelRatio,
    textureHeight: window.innerHeight * window.devicePixelRatio,
    color: 0x777777,
    recursion: 1
});
reflector.position.copy(plane.position);
reflector.rotation.copy(plane.rotation);
scene.add(reflector);

// 添加一个立方体
const cubeGeometry = new THREE.BoxGeometry();
const cubeMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(0, 1, 0);
scene.add(cube);

camera.position.z = 5;

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

解释说明：

1. 引入库：我们首先引入了 THREE 和 Reflector，后者用于创建反射效果。
2. 创建场景、相机和渲染器：这是 Three.js 的基本设置，包括创建场景、相机和渲染器，并将渲染器添加到页面中。
3. 添加光源：为了更好地展示反射效果，我们添加了一个方向光。
4. 创建平面：我们创建了一个平面作为反射面，并将其旋转以水平放置。
5. 使用 Reflector 创建反射效果：通过 Reflector 类创建反射效果，并将其添加到场景中。反射面的大小和位置与平面一致。
6. 添加一个立方体：为了展示反射效果，我们在场景中添加了一个立方体。
7. 渲染循环：最后，我们设置了一个渲染循环来不断更新场景并渲染。

这样，你就可以看到一个带有反射效果的平面和一个在平面上反射的立方体。