Use A-frame Img Assets Inside Javascript

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 ap

Solution 1:

You're using mesh.traverse() which calls your function once per child of mesh. If you have two children in your mesh, it'll call TextureLoader.load() twice. Simply take the load call out of traverse(), and you should see the image loaded just once.

let mesh = this.el.getObject3D('mesh')
letTextureLoader = newTHREE.TextureLoader()
let mymap = TextureLoader.load( data.mymap )

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

Solution 2:

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).

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.

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

For more info see AFrame documentation