A-Frame: Как динамически определить миксин во время выполнения? - PullRequest
Новая
       7

A-Frame: Как динамически определить миксин во время выполнения?

0 голосов
/ 25 мая 2018

Миксины A-Frame входят в элемент <a-assets> , который должен быть определен до рендеринга сцены.Это имеет смысл для предварительной загрузки / кэширования изображений, видео и т. Д., Но, похоже, должен быть способ динамически создавать и использовать миксины.

Просто добавление миксина в <a-assets> во время выполнения не похоже на работу,Рекомендация для добавления ресурсов изображения во время выполнения состоит в том, чтобы встроить источник изображения и установить его непосредственно на материале .Есть ли похожий способ определения / изменения миксина во время выполнения?Или мне просто нужно установить соответствующие свойства для всех объектов, к которым применяется миксин (учитывая также свойства, которые были установлены другими миксинами позже в цепочке миксинов или непосредственно на самом объекте)

Edit: похоже, что компонент aframe-asset-on-demand-* предназначен для этого для изображений / видео.Неясно, работает ли миксин, но он также не обновлялся в течение года.Это (полу) официально рекомендованное решение?

1 Ответ

0 голосов
/ 25 мая 2018

Извините, если я неправильно понял ваш вопрос, но мне кажется, что я могу добавить миксины к тегу 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>

Вот рабочий глюк

Чтобы продемонстрировать, как это можно добавить, когда сцена запущена здесь, есть версия того же компонента с setTimeout, чтобы продемонстрировать, как миксин может быть добавлен позже. 

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

Вот сбой этого

И дляради исследования, здесь то же самое настроено, но вызвано примером события.Сначала тот же компонент, но с прослушивателем событий 

// 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, как и раньше, но включающий тестовую сущность, которая генерируетevent 

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

И вот здесь есть сбой

Таким образом, вы можете смешивать их, добавлять миксин к активам, но задерживать / запускать при добавлении событиясвойства или добавить миксин к активам со свойствами, но задержать / вызвать событие, если установка этого атрибута для ваших целевых элементов.

Надеюсь, это поможет

...