Question

A-Frame Mixins进入<a-assets> element，必须在渲染场景之前定义。这对于预加载/缓存图像，视频等是有意义的，但似乎应该有一种动态创建和使用mixin的方法。

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

编辑：看起来https://social.technet.microsoft.com/wiki/contents/articles/33879.classification-algorithms-parameters-in-azure-ml.aspx旨在为图片/视频资源执行此操作。不清楚是否适用于mixins，但它也没有在一年内更新。这是（半）正式推荐的解决方案吗？

Answer 1

很抱歉，如果我误解了您的问题，但我似乎可以在运行时将mixins添加到assets标记中。基本版本意味着编写如下组件;

 // 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);

        },

      });

然后将在稍后添加mixin属性的HTML

<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

所以你可以将它们混合起来，将mixin添加到资源，但是在事件添加属性时延迟/触发，或者将mixin添加到具有属性的资产，但是在目标元素上设置该属性时会延迟/触发事件。 / p>

我希望有帮助

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

1 个答案: