threejs生成由内而外光圈、城市掠过。

1.生成掠过的光圈材质。

var uniform = {
	u_color: { value: new THREE.Color("#5588aa") },
	u_tcolor: { value: new THREE.Color("#EF5F00") },
	u_r: { value:0.8 },
	u_length: { value: 20 },//扫过区域
	u_max: { value: 600 }//扫过最大值
};
var Shader = {
	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);
		}
	`
}
aamaterial = new THREE.ShaderMaterial({
	vertexShader: Shader.vertexShader,
	fragmentShader: Shader.fragmentShader,
	side: THREE.DoubleSide,
	uniforms: uniform,
	transparent: true,
	depthWrite: false,
});

2. animate()中执行

if (aamaterial) {
	aamaterial.uniforms.u_r.value += delta * 50 + 4;
	if (aamaterial.uniforms.u_r.value >= 600) {
		aamaterial.uniforms.u_r.value = 20
	}
}
console.log(aamaterial);

3.使用方式

plane = new THREE.Mesh( geometry, aamaterial );

4.效果