【无标题】

threejs圆形扩散效果

//圆环扩散
let circle = scatterCircle(251, 0.120, 0.330, new THREE.Vector3(0, 1, 1), 5.02);
circle.position.set(0, 0, 0);
scene.add(circle);

//r 圆半径
//init 初始圆半径
//ring 圆环大小
//color 颜色 THREE.Vector3
//speed 速度
function scatterCircle(r, init, ring, color, speed) {
var uniform = {
u_color: { value: color },
u_r: { value: init },
u_ring: {
value: ring,
},
};
var vs = varying vec3 vPosition; void main(){ vPosition=position; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } ;
var fs = `
varying vec3 vPosition;
uniform vec3 u_color;
uniform float u_r;
uniform float u_ring;

	void main(){
		float pct=distance(vec2(vPosition.x,vPosition.y),vec2(0.0));
		if(pct>u_r || pct<(u_r-u_ring)){
			gl_FragColor = vec4(1.0,0.0,0.0,0);
		}else{
			float dis=(pct-(u_r-u_ring))/(u_r-u_ring);
			gl_FragColor = vec4(u_color,dis);
		}
	}
`;
const geometry = new THREE.CircleGeometry(r, 120);
var material = new THREE.ShaderMaterial({
	vertexShader: vs,
	fragmentShader: fs,
	side: THREE.DoubleSide,
	uniforms: uniform,
	transparent: true,
	depthWrite: false,
});
const circle = new THREE.Mesh(geometry, material);
function render() {
	uniform.u_r.value += speed || 0.1;
	if (uniform.u_r.value >= r) {
		uniform.u_r.value = init;
	}
	requestAnimationFrame(render);
}
render();
return circle;

}