threejs实现场景扫光【光柱场景扫射】

1.创建ShaderPass对象
let SweepingLightShader = {
uniforms: {
“tDiffuse”: {type: “t”, value: 0.0},
“time”:{type: “f”, value: 1.0}
},
vertexShader:varying vec2 vUv; varying vec3 iPosition; void main(){ vUv = uv; iPosition = position; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); },
fragmentShader:`
uniform float time;
uniform sampler2D tDiffuse;
varying vec2 vUv;
varying vec3 iPosition;
void main(){
vec4 texel = texture2D(tDiffuse, vUv);
float x = iPosition.x;
float lighty = x*1.2 + time;
float alpha = abs(iPosition.y - lighty);
if(alpha < 0.1){
float a = 1.0 - alpha / 0.1;
float enda = smoothstep(0.0,1.0,a) + 0.3;
gl_FragColor = texel * enda;
}else{
gl_FragColor = texel * 0.3;
}

}
`
};
2.实例
customGrayScale = new THREE.ShaderPass(SweepingLightShader);
customGrayScale.needsUpdate=true
window.customGrayScale=customGrayScale
composer.addPass(customGrayScale);
3.animate
//扫光
var time =customGrayScale.uniforms.time.value;
if(time > 2.0){
type = ‘reduce’
}else if(time < -2.0){
type = ‘add’;
}
if(type ==‘add’){
customGrayScale.uniforms.time.value += 0.01;
}else{
customGrayScale.uniforms.time.value -= 0.01;
}