关于three.js: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
},