threejs 反射的实现

引入库

// 主要
import { SSRPass, SSRPassParams } from 'three/examples/jsm/postprocessing/SSRPass';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
// Gamma和ShaderPass主要做矫正用的，习惯写pass通道的时候加上
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass';
import { GammaCorrectionShader } from 'three/examples/jsm/shaders/GammaCorrectionShader';
// FXAA抗锯齿，常用抗锯齿，测试在SSRPass里好像几种AA抗锯齿都无效
import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader';

新建渲染目标：WebGLRenderTarget

 const target = new THREE.WebGLRenderTarget(
            width,//宽
            height,//高
            {
                minFilter: THREE.LinearFilter,
                magFilter: THREE.LinearFilter,
                format: THREE.RGBAFormat,
                stencilBuffer: false,
                type: THREE.FloatType,
                encoding: THREE.sRGBEncoding
            }
        )

通过EffectComposer混合后期处理

   ssrcomposer: EffectComposer = null;
   this.ssrcomposer = new EffectComposer(this.renderer, target);
        const ssrPass = new SSRPass({
            renderer: this.renderer,
            scene: this.scene,
            camera: this.camera,
            width: width,
            height: height,
            selects: object,//object是要反射的物体
            isPerspectiveCamera: true,
            isBouncing: true,
            groundReflector: null
        });// 反射衰减
        ssrPass.isDistanceAttenuation = true;
        // 反射距离
        ssrPass.maxDistance = 10;
        // 菲涅尔反应
        ssrPass.isFresnel = true;
        ssrPass.output = SSRPass.OUTPUT.Default;
        ssrPass.opacity = 0.5;
    
        this.ssrcomposer.addPass(ssrPass);

最后实时渲染

 if(this.ssrcomposer!=null){
            this.ssrcomposer.render(1)
        }