three | 光源掃描，波動牆效果

效果

 

光源掃描

 

波動牆 

 

實現

 1. 創建一個點光源，動態修改頂點座標

    // 創建一個點光源
    this._pointlight = new THREE.PointLight('red')
    this._pointlight.intensity = 20;
    this._pointlight.decay = 1;
    this._pointlight.distance = 2;
    this._pointlight.position.copy(position)
    this._scene.add(this._pointlight)

    

在animation 每一幀渲染修改頂點座標

let py = 0 
// animation
if (this._pointlight) {
      if (py < 0.1) {
          py += 0.00005

          this._pointlight.position.y = this._pointlight.position.y + py
      } else if (py > 3) {

           this._pointlight.position.y = this._pointlight.position.y;
             py = 0
       }
 }

 

2. 創建圓柱幾何，貼上漸變的紋理材質

 const geometry = new THREE.CylinderGeometry(option.R, option.R, option.H, option.A);
 const cylinder = new THREE.Mesh(geometry, [
    new THREE.MeshBasicMaterial({ map: this._textureLoader.load(option.img), side: THREE.DoubleSide, transparent: true }),
    new THREE.MeshBasicMaterial({ transparent: true, opacity: 0, side: THREE.DoubleSide }),
    new THREE.MeshBasicMaterial({ transparent: true, opacity: 0, side: THREE.DoubleSide })
        ])
cylinder.position.copy(position)

this._scene.add(cylinder)

在animation 每一幀渲染修改圓柱的scale屬性設置大小

 let s = 0,p = 0

// animation
if(s > 5){s = 0, p = 1};
if (this._scanList) this._scanList.forEach(e => { e.scale.set(1 + s, 1, 1 + s); e.material[0].opacity = p })