时间戳

首页 > 解决方案 > aframe 直接实时更新 aframe-particle-system-component 的属性，无需 setAttribute()

aframe - aframe 直接实时更新 aframe-particle-system-component 的属性，无需 setAttribute()

问题描述

我正在使用aframe-particle-system-component，并且正在使用.setAttribute()该tick()功能来实时更新粒子系统，但它执行得非常糟糕，几乎导致与内存相关的崩溃。有没有办法直接访问系统的maxAge、opacity和enabled属性？我假设这是解决此问题的最佳方法，因为框架建议.object3D出于性能原因直接访问它。我希望能够以类似的方式访问粒子系统。任何帮助表示赞赏。

标签： aframewebvr

解决方案

tldr：这是一个带有动画不透明度、大小和一些切换的示例。切换最大年龄似乎要等到所有当前粒子都消失了，尽管文档中没有关于它的消息。

1. 破坏粒子系统

粒子系统是基于ShaderParticleEngine的，所以修改它不会是 THREE.js'ish。

据我所知，particle-system创建和存储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-frame 自定义组件的作业

我会创建一个自定义组件 - 任何更改都会遍历发射器组并更改属性：

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这么重

从源代码中收集，任何更改都会删除旧的粒子组并从头开始创建一个新的粒子组。

推荐阅读