在JavaScript中使用A帧img资产 [英] Use A-frame img assets inside javascript

问题描述

我多次通过使用图像作为纹理材料组件，另一个是自定义组件。在后者中，我使用的是 THREE.TextureLoader（），这会使应用程序加载两次图像。我敢打赌，还有另一种方法。

I'm using an image as a texture several times, once via the material component, another time in a custom component. In the latter I'm using THREE.TextureLoader() which cause the application to load the image twice. I bet there's another way.

HTML

<!-- Assets -->
<a-assets>
  <img id="my-map" src="path/to/map.jpg">
  <a-asset-item id="my-model" src=path/to/model.gltf""></a-asset-item>
</a-assets>

<!-- Entities -->
<a-box material="src: #my-map">
<a-entity gltf-model="src: #my-model" custom-component="mymap: #my-map">

JS

// custom-component extract
schema: { mymap: { type: 'map' } }
init: function() 
{
    let mesh = this.el.getObject3D('mesh')
    mesh.traverse( function( child ) 
    {
        if ( child.isMesh )
        {   
            let TextureLoader = new THREE.TextureLoader()
            let mymap = TextureLoader.load( data.mymap )

            child.material = new THREE.MeshPhongMaterial({ map: mymap })
            child.material.needsUpdate = true;
        }
    })
}

问题

如何在自定义组件中使用相同的图像资产而不加载两次？

Question

How can I use the same image asset in the custom component without loading it twice?

推荐答案

在对ThreeJs代码进行了一些研究之后，我发现 TextureLoader 依赖于 ImageLoader （请参见此处），在加载新图像之前，它会查找 THREE.Cache 查看是否已加载图像（请参见此处）。

After some research digging in ThreeJs code I've found that TextureLoader relies on ImageLoader (see here) which, before loading a new image, it looks into THREE.Cache to see if the image has already been loaded (see here).

在AFrame中将图像作为 img 加载不会存储在 THREE.Cache ，因此图像被加载了两次。但是，如果您将图像作为 a-asset-item 加载，则会这样做。

Loading images as img in AFrame doesn't store them in THREE.Cache therefore the image was loaded twice. But if you load the image as a-asset-item it does.

因此无需更改javascript中的任何内容。只需使用资产项而不是 img 。

So there is no need to change anything in javascript. Just use a-asset-item instead of img.

有关更多信息，请参见 AFrame文档

For more info see AFrame documentation

这篇关于在JavaScript中使用A帧img资产的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！