three.js 使用 CubeCamera 实现地面反射倒影

three.js 使用 CubeCamera 实现地面反射倒影

有时候，我们在做three.js项目时，需要实现地面反射倒影的效果。

例如这样的效果。

这样的效果怎么样实现呢，今天我们使用CubeCamera来实现这个地面倒影效果。

2. 创建地面

1. 创建地面我们使用 MeshStandardMaterial 材质创建，因为可以添加 envMap 环境纹理
2. 我们将 MeshStandardMaterial 材质的 roughness (粗糙度) 设置为 0， metalness (金属度) 设置为 1
3. 目的是让他有金属材质的反射特性。

const plane = new Mesh(
new PlaneGeometry(300, 300), 
new MeshStandardMaterial({ side: FrontSide,roughness: 0, metalness: 1 })
);
plane.rotateX(-Math.PI / 2);
scene.add(plane);

3. 创建 cubeCamera

const cubRenderTarget = new WebGLCubeRenderTarget(1024);
// WebGLCubeRenderTarget
// 是 Three.js 中用于创建一个立方体贴图（cube map）渲染目标的类
// 指定纹理的尺寸 1024
const cubeCamera = new CubeCamera(0.001, 10000, cubRenderTarget);
// 0.001 是相机的近裁剪面
// 10000 是相机的远裁剪面
// cubRenderTarget 目标多维数据集渲染目标

感觉哈，cubeCamera 他会将拍摄的场景转变成纹理给 cubRenderTarget。
这个纹理是 立方体 纹理。

4. 在帧循环中调用相机的update方法

cubeCamera.position.copy(camera.position);
// 将透视投影相机的位置，至今复制给 cubeCamera, 那他就会在，站在用户的位置来拍摄这个场景
// 因为要和我们看到的场景效果一致，所以要把相机的位置copy到cubeCamera中。
cubeCamera.update(renderer, camera);

5. 将 WebGLCubeRenderTarget 的纹理赋值给地面的环境纹理贴图

plane.material.envMap = cubRenderTarget.texture;

此时发现还是不太对，

因为从效果上开

cubeCamera 相机应该是从底下去拍摄这个场景的。
所以在帧循环中

cubeCamera.position.copy(camera.position);
cubeCamera.position.y = -cubeCamera.position.y; // 将他的高度，刚好和相机的高度相反
cubeCamera.update(renderer, scene);
renderer.render(scene, camera);

注意我这的 地面是 单面可见 side: FrontSide
所以他可以从低往上看，可以看到 黄色立方体。