我正在使用aframe-particle-system-component ,并在 tick()
函数上使用 .setAttribute()
来实时更新粒子系统,但它的性能非常糟糕,导致几乎即时的内存相关崩溃。有没有办法直接访问系统的 maxAge
、opacity
和 enabled
属性?我认为这是解决此问题的最佳方法,因为出于性能原因,框架建议直接访问 .object3D
。我希望能够以类似的方式访问粒子系统。如有任何帮助,我们将不胜感激。
最佳答案
tldr:here's一个带有动画不透明度、大小和一些切换的示例。切换最大年龄似乎要等到所有当前粒子都消失为止,尽管 docs 中没有任何相关说明。 .
1。破坏粒子系统
粒子系统基于ShaderParticleEngine ,所以修改它不会是那样的 THREE.js'ish。
据我所知,粒子系统
创建并存储SPE.Emitter
。您可以在这里访问它们:
let particleSystem = this.el.component['particle-system']
let emitterGroup = particleSystem.particleGroup.emitters
更改值 - 例如,如果您有一个发射器:
emitterGroup[0].disable() // disables the emitter
emitterGroup[0].opacity.value = 0.1 // sets the opacity
2。 A 框架自定义组件的作业
我将创建一个自定义组件 - 它将根据任何更改迭代发射器组并更改属性:
AFRAME.registerComponent('particle-controller', {
schema: {
opacity: {default: 1}
},
init: function() {
let system = this.el.components['particle-system']
this.emitterGroup = system.particleGroup.emitters
},
update: function() {
this.setValueInEmitters(this.emitterGroup, 'opacity', this.data.opacity)
},
// may come in handy when changing more key-value pairs
setValueInEmitters(group, prop, value) {
for (let i = 0; i < group.length; i++) {
group[i].prop.value = value
}
}
})
架构可以提供键值对等,以使组件更加通用。
3。为什么setAttribute这么重
来自source code的聚会,任何更改都会删除旧的粒子组并从头开始创建一个新的粒子组。
关于Aframe 直接实时更新 aframe-article-system-component 的属性,无需 setAttribute(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58396978/