基于正弦波扩散效果的ShaderMaterial

const vertexShader = `  
	varying vec2 vertexUV;
	
	void main() { 
		vertexUV = uv;
		gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  	}`;

const fragmentShader = `
	uniform vec3 uColor;
	uniform float uTime;
	varying vec2 vertexUV;
	
	void main() {
		//len的范围在(0,0.5)之间,表示了当前位置距离中心点的长度,跟mesh的大小无关
		float len = distance(vec2(0.5, 0.5), vec2(vertexUV.x, vertexUV.y));

		gl_FragColor = vec4(uColor , 
			(1.0 - len * 2.0) *		//由深到浅的主色调
			(sin(len * 2.0 * 3.14159 * 8.0 - uTime) + 1.0) / 2.0	//正弦波的变化色调 
		);
	}`;

		const config = {
			width: 5.0,
			color: 0x99ccff,
		};

		let uniforms = {
		    uColor: { value: new THREE.Color(config.color) },
		    uWidth: { value: config.width},
		    uTime: { value: 0.0}
		};
		this.uniforms = uniforms;

		let g = new THREE.CircleGeometry(config.width,64,64);
		let m = new THREE.ShaderMaterial({
			uniforms: uniforms,
			vertexShader: vertexShader,
			fragmentShader: fragmentShader,
			side: THREE.DoubleSide,
			transparent:true		//很重要
		});

基于正弦波的扩散效果