如何确定纹理应用于实体的时间?
<a-entity material="src: url(mytexture.png)"></a-entity>有material-texture-loaded事件( https://aframe.io/docs/0.2.0/components/material.html ),但似乎只有在纹理完全到达浏览器后才会触发(而不是实际上正在应用)。
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).
最满意答案
在我们使用three.js设置material.map和material.needsUpdate后立即应用materialtextureloaded事件。
我们发现发生的是纹理图像宽度/高度没有两种功率分辨率(例如,64x64,512x512,128x1024)。 这对于大型纹理尤其重要,例如在a-sky使用的equirectangular照片。
因此,在运行时期间,three.js需要一些时间来调整纹理大小。 一旦我们调整了纹理大小,事件就会越接近屏幕上显示的纹理。
myEntityEl.addEventListener('materialtextureloaded', function () { setTimeout(function () { // setTimeout for good measure. console.log('material now showing on screen'); }, 200); });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); });
更多推荐
发布评论