threejs娣诲姞璀︽姤鐐?/a>

Posted 2021-09-06 鍙嬩汉A

1.鍒濆鍖杝cene锛屽垱寤鸿鎶ョ偣娣诲姞鍒皊cene

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.鍘熶綔鑰呭湴鍧€锛?a href="https://segmentfault.com/u/yourena_5d7207ca8f870">馃憞馃憞馃憞
https://segmentfault.com/u/yo...
3.鎺у埗璀︽姤鐐规樉绀轰互鍙婇棯鍔紙lightI鍦?strong>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
},