three.js做成这种镜面反射的效果。
那就要使用three自带的功能Reflector
1.引入 组件
import { Reflector } from '../../node_modules/three/examples/jsm/objects/Reflector.js';
2.创建反射投影的存在面
let reflectorGeometry = new THREE.PlaneBufferGeometry(100, 100);
3.开始使用Reflector
let reflectorPlane = new Reflector(reflectorGeometry, {
textureWidth: width,
textureHeight: height,
color: 0x332222,
});
其中：
1. color : 反射面的颜色，可以是一个 CSS 颜色字符串或是一个 three.js 的 Color 对象，默认值是 0x7F7F7F。
2. textureWidth : 反射纹理的宽度，单位是像素，默认值是 512。
3. clipBias: 剪裁偏移值，用于控制剪裁平面的位置，可以用于解决渲染的反射对象和原始对象之间的闪烁问题，默认值是 0。。
4. shader : 用于渲染反射效果的着色器程序，可以是一个 three.js 的 ShaderMaterial 对象，默认值是 undefined，表示使用内置的着色器。
5. encoding: 反射纹理的编码格式，默认值是 LinearEncoding。
6. multisample :: 反射纹理的多重采样级别，用于抗锯齿，默认值是 0，表示不使用多重采样。
4.完整代码
// 添加镜面反射
let reflectorGeometry = new THREE.PlaneBufferGeometry(100, 100);
let reflectorPlane = new Reflector(reflectorGeometry, {
textureWidth: width,
textureHeight: height,
color: 0x332222,
});
reflectorPlane.rotation.x = -Math.PI / 2;
scene.add(reflectorPlane);
