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;

}