CODEWITHSUNDEEP
aframe
ngokevin
ngokevin

Reputation: 13233

How to listen or detect that a texture has been loaded/applied to a material/entity in A-Frame?

How do I figure out when a texture is applied to an entity?

<a-entity material="src: url(mytexture.png)"></a-entity>

There is the material-texture-loaded event (https://aframe.io/docs/0.2.0/components/material.html), but that seems to only be fired once the texture has fully arrived to the browser (rather than actually being applied).

Upvotes: 1

Views: 842

Answers (1)

ngokevin
ngokevin

Reputation: 13233

The materialtextureloaded event is applied immediately after we set material.map and material.needsUpdate using three.js.

What we found was happening was that the texture image width/height did not have power-of-two resolutions (e.g., 64x64, 512x512, 128x1024). This is especially important for large textures like equirectangular photos used in a-sky.

Because of that, it took some time for three.js to resize the texture during runtime. Once we resized the texture, the event was firing closer to the time the texture displayed on screen.

myEntityEl.addEventListener('materialtextureloaded', function () {
  setTimeout(function () {  // setTimeout for good measure.
    console.log('material now showing on screen');
  }, 200);
});

Upvotes: 4

Related Questions