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

今天药忘吃喽~ 2023-02-23 01:28 10阅读 0赞

### 前言 ###

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

### 效果 ###

光源扫描

![20200704183819670.gif][]

波动墙

![20200704183839357.gif][]

### 实现 ###

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

[20200704183819670.gif]: https://img-blog.csdnimg.cn/20200704183819670.gif
[20200704183839357.gif]: https://img-blog.csdnimg.cn/20200704183839357.gif