引入库
// 主要
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)
}