Блог

У меня есть что-то вроде этой настройки в моем коде:

 <a-entity id="foo-parent" rotation="0 15 0" my-component>
         
<a-entity gltf-model="#foo" id="foo0"></a-entity>
<a-entity gltf-model="#foo" id="foo1"></a-entity>
<a-entity gltf-model="#foo" id="foo2"></a-entity>
<a-entity gltf-model="#foo" id="foo3"></a-entity>
<a-entity gltf-model="#foo" id="foo4"></a-entity>

</entity>
  

И мой компонент:

 AFRAME.registerComponent('my-component', {
  schema: {
    img: {
      default: ["tex_0","tex_1","tex_2","tex_3","tex_4"]
    }
  },
  init: function() {
    var data = this.data;
    var el = this.el;

      el.addEventListener('loaded', function(e) {
        // setTimeout(function() {
          el.object3D.traverse(function(child) {
            console.log(child);
            if (child.isMesh) {
              var picker = Math.floor(Math.random() * data.img.length);
              // console.log(picker);
              var texture = new THREE.TextureLoader().load('./images/' data.img[picker] '.jpg');
              console.log(data.img[picker]);
              child.idNum = data.img[picker].split("_")[1];
              console.log(child.idNum); // need to set reference to img

              child.material.map = texture;
              child.material.map.encoding = THREE.sRGBEncoding;
              child.material.map.flipY = false;
              data.img.splice(picker,1);

            }
          });
        // },2000);

  }
});
  

Моя проблема в том, что если у меня нет этого времени ожидания 2000 мс в загруженном EventListener, я не получаю изображения, примененные к сеткам — это как если бы дочерние модели все еще загружались и, следовательно, не могли отобразить изображение вопреки тому, что описано здесь https://aframe.io/docs/1.0.0/core/asset-management-system.html .

loaded Событие генерируется после того, как объект подключил и инициализировал свои компоненты (где инициализируется вызов init() в компонентах).

Это не будет ждать, пока будут загружены все дочерние элементы — это нужно сделать вручную, особенно если требуется некоторая загрузка ресурсов, например, в случае загрузки моделей gltf.

Вы можете просто посчитать model-loaded события, чтобы узнать, все ли готово:

 AFRAME.registerComponent("foo", {
  init: function() {
    var counter = 0;
    // iterate through the children
    for (let child of this.el.children) {
      // when the model is loaded - increment the counter
      child.addEventListener("model-loaded", e => {
        if (counter   >= this.el.children.length) {
          // all is loaded - do your magic
          this.childrenLoaded.call(this)
        }
      })
    }
  },
  childrenLoaded: function() {
    // do your stuff
  }
})
  

Пример изменения цвета при загрузке всех дочерних элементов здесь (источник)