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