threejs添加警报点

1.初始化scene，创建警报点添加到scene

serverGroup = new THREE.Group();
scene.add(serverGroup);

pointGroup = this.addAletPoint([1.5,112,0])
pointGroup.mesh.name = 'zhongxin'
serverGroup.add(pointGroup.mesh);
serverGroup.add(pointGroup.mesh2);

// 添加警报点
addAletPoint(position) {
        let vertexShader = [
            'varying vec3    vVertexWorldPosition;',
            'varying vec3    vVertexNormal;',
            'varying vec4    vFragColor;',
            'void main(){',
            '    vVertexNormal  = normalize(normalMatrix * normal);', //将法线转换到视图坐标系中
            '    vVertexWorldPosition   = (modelMatrix * vec4(position, 1.0)).xyz;', //将顶点转换到世界坐标系中
            '    // set gl_Position',
            '    gl_Position    = projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
            '}'
        ].join('\n')
        let fragmentShader1 = [
            'uniform vec3    glowColor;',
            'uniform float   coeficient;',
            'uniform float   power;',
            'varying vec3    vVertexNormal;',
            'varying vec3    vVertexWorldPosition;',
            'varying vec4    vFragColor;',
            'void main(){',
            '    vec3 worldCameraToVertex= vVertexWorldPosition - cameraPosition;', //世界坐标系中从相机位置到顶点位置的距离
            '    vec3 viewCameraToVertex    = (viewMatrix * vec4(worldCameraToVertex, 0.0)).xyz;', //视图坐标系中从相机位置到顶点位置的距离
            '    viewCameraToVertex = normalize(viewCameraToVertex);', //规一化
            '    float intensity       = pow(coeficient + dot(vVertexNormal, viewCameraToVertex), power);',
            '    gl_FragColor      = vec4(glowColor, intensity);',
            '}'
        ].join('\n')

        //本质透明度递减
        let sphere = new THREE.SphereBufferGeometry(2, 16, 16)
        let material = new THREE.ShaderMaterial({
            uniforms: {
                coeficient: {
                    type: 'f',
                    value: 1.0
                },
                power: {
                    type: 'f',
                    value: 1
                },
                glowColor: {
                    type: 'c',
                    value: new THREE.Color('#ff0000')
                }
            },
            vertexShader: vertexShader,
            fragmentShader: fragmentShader1,
            blending: THREE.NormalBlending,
            // depthWrite:false,
            // depthTest: true,
            transparent: true
        })
        let mesh = new THREE.Mesh(sphere, material)
        let sphere2 = new THREE.SphereBufferGeometry(0.1, 16, 16)
        let material2 = new THREE.MeshPhongMaterial({
            color: new THREE.Color('#ff0000')
            //   depthWrite:false,
            //   depthTest: true
        })
        let mesh2 = new THREE.Mesh(sphere2, material2)
        mesh.position.set(...position) //  ，高度，
        mesh2.position.set(...position) //  ，高度，

        return { mesh: mesh, mesh2: mesh2 }
},

2.原作者地址：👇👇👇
https://segmentfault.com/u/yo...
3.控制警报点显示以及闪动（lightI在data()已经初始化了，作为光源的直径大小，通过scale来控制）

//警报点显示以及闪动
openPointe(){
  let pointe = serverGroup.children.filter(item => item.type=="Mesh")
    if (this.lightI< 100) {
      this.lightI = this.lightI + 10
      let j = this.lightI/100
      pointe.forEach(element => {
        if(element.name=="zhongxin"){
          element.material.opacity = 1
          element.scale.set(j,j,j);
        }
        
      });
    } else {
      this.lightI = 0
    }
},
//警报点隐藏以及不闪动
closePointe(){
  let pointe = serverGroup.children.filter(item => item.type=="Mesh")
  pointe.forEach(element => {
        element.material.opacity = 0
        element.scale.set(0,0,0);
  });
  this.lightI = 0
},