3D小游戏(three)-粒子效果

目录

粒子聚集效果

粒子散开效果

---

粒子聚集效果

1. Objects/bottle.js

init中

//粒子加载

this.particles = []

const whiteParticleMaterial = new THREE.MeshLambertMaterial({map:this.loader.load('/game/res/images/white.png'),opacity:0.6,transparent:true})

// const greenParticleMaterial = new THREE.Material({map:this.loader.load('/game/res/images/green.png'),alphaTest:0.5})

const greenParticleMaterial = new THREE.MeshLambertMaterial({map:this.loader.load('/game/res/images/green.png'),opacity:0.6,transparent:true})

const particleGeometry = new THREE.PlaneGeometry(2,2)

for (let i = 0; i < 15; i++) {

const particle = new THREE.Mesh(particleGeometry,greenParticleMaterial)

particle.rotation.x= -Math.PI/4

particle.rotation.y= -Math.PI/5

particle.rotation.z= -Math.PI/5

this.particles.push(particle)

this.obj.add(particle)

}

for (let i = 0; i < 5; i++) {

const particle = new THREE.Mesh(particleGeometry,whiteParticleMaterial)

particle.rotation.x= -Math.PI/4

particle.rotation.y= -Math.PI/5

particle.rotation.z= -Math.PI/5

this.particles.push(particle)

this.obj.add(particle)

}

shrink中

this.gatherParticles()

jump中

this.resetParticles()

函数

resetParticles(){

if (this.gaterTimer) {

clearTimeout(this.gaterTimer)

}

this.gaterTimer=null

for (let i = 0; i < this.particles.length; i++) {

this.particles[i].gathering = false

this.particles[i].scattering = false

this.particles[i].visible =false

}

}

gatherParticles(){//粒子聚集

for (let i = 10; i < 20; i++) {

// console.log(this.particles)

this.particles[i].gathering = true//粒子聚集设置true

this.particles[i].scattering = false//发散false

this._gatherParticle(this.particles[i])

}

this.gaterTimer = setTimeout(//控制白色粒子聚集

()=>{

for (let i = 10; i < 20; i++) {

this.particles[i].gathering = true//粒子聚集设置true

this.particles[i].scattering = false//发散false

this._gatherParticle(this.particles[i])

}

},500+1000*Math.random())

}

_gatherParticle(particle){

//粒子初始化

const minDistance = 1

const maxDistance = 8

// particle.scale(1,1,1)

particle.visible = false

//随机位置

const x = Math.random() > 0.5 ? 1 : -1

const z = Math.random() > 0.5 ? 1 : -1

particle.position.x = (minDistance+(maxDistance-minDistance)*Math.random())*x

particle.position.z = (minDistance+(maxDistance-minDistance)*Math.random())*z

particle.position.y = minDistance+(maxDistance-minDistance)*Math.random()

//聚集

setTimeout(((particle)=>{//闭包

return ()=>{

if (!particle.gathering) return

particle.visible = true

const duration = 0.5 +Math.random()*0.4

customAnimation.to(particle.scale,duration,{

x: 0.8 + Math.random(),

y: 0.8 + Math.random(),

z: 0.8 + Math.random(),

})

customAnimation.to(particle.position,duration,{

x: Math.random()*x,

y: Math.random()*2.5,

z: Math.random()*z,

onComplete:()=>{//回调

if (particle.gathering) {

this._gatherParticle(particle)

}

}

})

}

})(particle),Math.random()*500)

}

粒子散开效果

1. objects/bottle.js

scatterParticles(){//粒子聚集

for (let i = 0; i < 10; i++) {

// console.log(this.particles)

this.particles[i].gathering = false//粒子发散设置true

this.particles[i].scattering = true//聚集false

this._scatterParticle(this.particles[i])

}

}

_scatterParticle(particle){

//粒子初始化

const minDistance = bottleConf.bodyWidth/2

const maxDistance = 2

particle.scale.set(1,1,1)

particle.visible = false

//随机位置

const x =(minDistance+(maxDistance-minDistance)*Math.random())*(1-2*Math.random())

const z =(minDistance+(maxDistance-minDistance)*Math.random())*(1-2*Math.random())

particle.position.x = x

particle.position.z = z

particle.position.y = -0.5

//发散

setTimeout(((particle)=>{//闭包

return ()=>{

if (!particle.scattering) return

particle.visible = true

const duration = 0.3 +Math.random()*0.2

customAnimation.to(particle.scale,duration,{

x: 0.2,

y: 0.2,

z: 0.2,

})

customAnimation.to(particle.position,duration,{

x: 2*x,

y: Math.random()*2.5+2,

z: 2*z,

onComplete:()=>{//回调

if (particle.scattering) {

particle.scattering = false

particle.visible = false

}

}

})

}

})(particle),Math.random()*500)

}

1. game-page.js

checkBottleHit

this.bottle.scatterParticles()//粒子发散