如何在 A-Frame 中监听或检测纹理已 loaded/applied 到 material/entity？

Question

如何确定纹理何时应用于实体？

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

有 material-texture-loaded 事件 (https://aframe.io/docs/0.2.0/components/material.html)，但似乎只在纹理完全到达浏览器时触发（而不是实际应用）。

Answer 1

在我们使用 three.js 设置 material.map 和 material.needsUpdate 后立即应用 materialtextureloaded 事件。

我们发现纹理图像 width/height 没有 二次方 分辨率（例如 64x64、512x512、128x1024）。这对于 a-sky.

中使用的等距柱状照片等大型纹理尤为重要

因此，three.js 在运行时调整纹理大小需要一些时间。一旦我们调整了纹理的大小，事件就会在接近纹理显示在屏幕上的时间触发。

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

如何在 A-Frame 中监听或检测纹理已 loaded/applied 到 material/entity？

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

aframe