three shader实现智慧城市雷达扫描效果

主要通过shader实现雷达扇形区域的颜色渐变效果,可以通过修改 uFollowWidth的度数来控制雷达颜色的渐变大小,修改ncolor控制颜色，最后记得在渲染函数中修改group的y值来实现自动旋转

制作雷达扇形区域

      const  vertexShader= `

varying vec3 v_position;

void main() {
    v_position = position;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

  `
      const fragmentShader=`
varying vec3 v_position;
uniform float uFollowWidth;
	uniform vec3 ncolor;
float angleToCenter(vec3 point) {
    vec3 center = vec3(0.0); // 圆心位置，这里假设在原点
    vec3 toCenter = center - point;
    float angle = atan(toCenter.y, toCenter.x);
    angle = degrees(angle);
    angle = mod(angle, 360.0);
    return angle;
}

void main() {
    float angle = angleToCenter(v_position);

    if(angle<uFollowWidth){
       	// 尾焰区域
				float opacity =  1.0 - angle / uFollowWidth;
				gl_FragColor = vec4( ncolor, 1.0 * opacity );
    }else{
     	// 其他位置的像素均为透明
				gl_FragColor = vec4( ncolor, 0.0 );
    }

    }
  `


      // 创建雷达扫描的几何体
      const geometry = new THREE.CircleGeometry(500,1000);
      this.Smaterial1 = new THREE.ShaderMaterial({
        vertexShader:vertexShader,
        fragmentShader:fragmentShader,
        transparent: true,
        blending: AdditiveBlending,
        depthWrite: false,
        side: DoubleSide,
        depthTest: true,
        uniforms: {
          uFollowWidth: { value: 190 },
          ncolor: { value: new Color("#f0a") },
        },
      });
      const sphere = new THREE.Mesh(geometry, this.Smaterial1);
      sphere.rotateX(-Math.PI / 2)
      this.group=new THREE.Group()
      this.group.add(sphere)


      this.scene.add(this.group);

在渲染函数修改group的局部坐标系的y值实现雷达旋转

  animate() {
     
      this.renderer.render(this.scene, this.camera)
      // 旋转组，使其沿着自己中心旋转
      this.group.rotation.y -= 0.1;

      this.animationId = requestAnimationFrame(this.animate);
    },