Threejs 实现扩散圆环效果

ThreeJS 实现扩散圆效果

代码实现

1//r 圆半径
2//init 初始圆半径
3//ring 圆环大小
4//color 颜色 THREE.Vector3
5//speed 速度
6function scatterCircle(r, init, ring, color, speed) {
7	var uniform = {
8		u_color: { value: color },
9		u_r: { value: init },
10		u_ring: {
11			value: ring,
12		},
13	};
14
15	var vs = `
16		varying vec3 vPosition;
17		void main(){
18			vPosition=position;
19			gl_Position	= projectionMatrix * modelViewMatrix * vec4(position, 1.0);
20		}
21	`;
22	var fs = `
23		varying vec3 vPosition;
24		uniform vec3 u_color;
25		uniform float u_r;
26		uniform float u_ring;
27
28		void main(){
29			float pct=distance(vec2(vPosition.x,vPosition.y),vec2(0.0));
30			if(pct>u_r || pct<(u_r-u_ring)){
31				gl_FragColor = vec4(1.0,0.0,0.0,0);
32			}else{
33				float dis=(pct-(u_r-u_ring))/(u_r-u_ring);
34				gl_FragColor = vec4(u_color,dis);
35			}
36		}
37	`;
38	const geometry = new THREE.CircleGeometry(r, 120);
39	var material = new THREE.ShaderMaterial({
40		vertexShader: vs,
41		fragmentShader: fs,
42		side: THREE.DoubleSide,
43		uniforms: uniform,
44		transparent: true,
45		depthWrite: false,
46	});
47	const circle = new THREE.Mesh(geometry, material);
48
49	function render() {
50		uniform.u_r.value += speed || 0.1;
51		if (uniform.u_r.value >= r) {
52			uniform.u_r.value = init;
53		}
54		requestAnimationFrame(render);
55	}
56	render();
57
58	return circle;
59}
60

使用

1let circle = scatterCircle(1, 0.1, 0.3, new THREE.Vector3(0, 1, 1), 0.02);
2circle.position.set(x, y, z);
3scene.add(circle);