[three] | 光源扫描 波动墙效果

前言

最近在学习threejs   顺便整理学习心得出一些三维特效

效果

光源扫描

波动墙 

实现

 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 })