javascript - 在 javascript 中使用 A-frame img 资源

Question

我多次使用图像作为纹理，一次是通过 material组件，另一次在自定义组件中。在后者中，我使用了 THREE.TextureLoader()，这会导致应用程序加载图像两次。我敢打赌还有另一种方式。

现状

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;
        }
    })
}

问题

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

Answer 1

您正在使用 mesh.traverse()，它会为 mesh 的每个子节点调用一次您的函数。如果您的网格中有两个 child ，它会调用 TextureLoader.load() 两次。只需从 traverse() 中取出加载调用，您应该会看到图像只加载了一次。

let mesh = this.el.getObject3D('mesh')
let TextureLoader = new THREE.TextureLoader()
let mymap = TextureLoader.load( data.mymap )

mesh.traverse( function( child ) 
{
    if ( child.isMesh )
    {   
        child.material = new THREE.MeshPhongMaterial({ map: mymap })
        child.material.needsUpdate = true;
    }
})