threejs扫光shader

效果

shader

var Shader = {
			uniform: {
			    u_color: { value: new THREE.Color("#5588aa") },
			    u_tcolor: { value: new THREE.Color("#ff9800") },
			    u_r: { value: 0.1 },
			    u_length: { value: 1 },//扫过区域
			    u_max: { value: 100 }//扫过最大值
			};
            vertexShader: ` 
                varying vec3 vp;
                void main(){
                vp = position; 
                gl_Position	= projectionMatrix * modelViewMatrix * vec4(position, 1.0);
                }
            `,
            fragmentShader: `
                varying vec3 vp;
                uniform vec3 u_color;
                uniform vec3 u_tcolor;
                uniform float u_r;
                uniform float u_length;
                uniform float u_max;
                float getLeng(float x, float y){
                    return  sqrt((x-0.0)*(x-0.0)+(y-0.0)*(y-0.0));
                }
                void main(){ 
                    float uOpacity = 0.3; 
                    vec3 vColor = u_color;
                    float uLength = getLeng(vp.x,vp.z);
                    if ( uLength <= u_r && uLength > u_r - u_length ) { 
                        float op = sin( (u_r - uLength) / u_length ) * 0.6 + 0.3 ;
                        uOpacity = op; 
                        if( vp.y<0.0){
                            vColor  = u_tcolor * 0.6; 
                        }else{ 
                            vColor = u_tcolor;
                        };
                    } 
                    gl_FragColor = vec4(vColor,uOpacity);
                }
            `
        }

材质添加

material = new THREE.ShaderMaterial({
            vertexShader: Shader.vertexShader,
            fragmentShader: Shader.fragmentShader,
            side: THREE.DoubleSide,
            uniforms: uniform,
            transparent: true,
            depthWrite: false,
        });

把材质给到需要添加的模型

function initModel(){
  var mtlLoader = new MTLLoader();
  mtlLoader.setPath('./static/models/test/');
  mtlLoader.load('male02.mtl',(materials) => {
    materials.preload()
    var objLoader = new OBJLoader()
    objLoader.setMaterials(materials)
    objLoader.setPath('./static/models/test/');
    objLoader.load('male02.obj',(object) => {
    /***************************************************************/
    // 把扫光shader添加给模型
    object.material = material
      scene.add(object)
    }, onProgress, onError)
  });
}

render渲染添加

render(){
	update()
  	requestAnimationFrame(render)// 执行一个动画.并在动画执行后重新渲染
  	renderer.render(scene, camera)
	if (material) {
            material.uniforms.u_r.value += dalte * 10;
            if (material.uniforms.u_r.value >= 100) {
                material.uniforms.u_r.value = 1
            }
        }
}

后续

这个是从简书里看的，修修改改加上能用，具体链接没找到，如有冒犯请见谅，评论链接添加转载或删除。