A-Frame：如何在运行时动态定义 mixin？

Question

A-Frame Mixins go into the <a-assets> element，必须在渲染场景之前定义。这对 pre-loading/caching 图片、视频等很有意义，但似乎应该有一种动态创建和使用 mixins 的方法。

只是在运行时将 mixin 添加到 <a-assets> 似乎不起作用。 recommendation for adding image assets at runtime is to inline the image source and set it on the material directly。在运行时是否有一些类似的 defining/altering 混合方式？还是我只需要在所有应用了 mixin 的对象上设置相关属性（注意还要考虑其他 mixin 后面在 mixin 链中或直接在对象本身上设置的属性）

编辑：看起来 aframe-asset-on-demand-component 是为 image/video 资产设计的。不清楚是否适用于 mixins，但它也已经一年没有更新了。这是（半）官方推荐的解决方案吗？

Answer 1

抱歉，如果我误解了你的问题，但我似乎能够在运行时将 mixins 添加到资产标签。基本版本意味着编写如下组件；

 // add assets at run time
 AFRAME.registerComponent('addasset', {

        init: function () {          
          var assets = document.getElementsByTagName('a-assets')[0]
          var mixin = document.createElement('a-mixin')
          mixin.setAttribute('id', 'makeitred')
          mixin.setAttribute('material', 'color: red')
          assets.appendChild(mixin)
        },

 });

然后按如下方式将该组件附加到场景中；

<a-scene addasset>
  <a-assets>
  </a-assets>
  <a-cylinder 
    mixin="makeitred" 
    position="0 0.5 -3">
  </a-cylinder>
</a-scene>

Here is a working glitch

为了演示如何在场景完成后添加运行这里是同一组件的一个版本 setTimeout 以演示如何稍后添加 mixin。

// add assets at run time, delayed
      AFRAME.registerComponent('addasset', {

        init: function () {  
          setTimeout(function(){ 
            var assets = document.getElementsByTagName('a-assets')[0]
            var mixin = document.createElement('a-mixin')
            var cylinder = document.getElementsByTagName('a-cylinder')[0]
            mixin.setAttribute('id', 'makeitred')
            mixin.setAttribute('material', 'color: red')
            assets.appendChild(mixin)
            cylinder.setAttribute('mixin', 'makeitred')
          }, 2000);

        },

      });

然后HTML后面会加入mixin属性

<a-scene addasset>
      <a-assets>
      </a-assets>
      <a-cylinder 
        position="0 0.5 -3">
      </a-cylinder>
</a-scene>

Here is a glitch of that

为了探索，这里是相同的设置，但由示例事件触发。首先是相同的组件，但带有事件侦听器

// add assets at run time, triggered by event
      AFRAME.registerComponent('addasset', {

        init: function () {  

          document.addEventListener("testevent", function(){
              var assets = document.getElementsByTagName('a-assets')[0]
              var mixin = document.createElement('a-mixin')
              var cylinder = document.getElementsByTagName('a-cylinder')[0]
              mixin.setAttribute('id', 'makeitred')
              mixin.setAttribute('material', 'color: red')
              assets.appendChild(mixin)
              cylinder.setAttribute('mixin', 'makeitred')
          });

        },

      });

然后是发出测试事件的组件

 // test event to trigger adding of mixin
  AFRAME.registerComponent('testevent', {

    init: function () {  

      var self = this.el

      setTimeout(function(){ 
        self.emit("testevent") 
      }, 3000);

    },

  });

然后 HTML，和以前一样，但包括一个发出事件的测试实体

<a-scene addasset>
      <a-assets>
      </a-assets>
      <a-cylinder 
        position="0 0.5 -3">
      </a-cylinder>
      <a-entity 
        testevent>
      </a-entity>
</a-scene>

And here is a glitch for that

因此，您可以将它们混合，将混入添加到资产中，但 delay/trigger 在事件中添加属性，或者将混入添加到具有属性的资产中，但在事件中 delay/trigger 该属性的设置在你的目标元素上。

希望对你有所帮助

A-Frame：如何在运行时动态定义 mixin？

A-Frame: How to define a mixin dynamically at runtime?

aframe