Aframe Three.js Javascript caching images

Question

I'm sharing a bunch of images between a React layer and an AFRAME VR layer.

I've preloaded the images into in an assets entity (not using the aframe asset manager as these assets are loaded dynamically at run time)

i.e.

    const asset = getAsset(state, assetId, thumbnail)
    const image = new Image()
    image.id = assetId
    image.src= asset.url
    document.getElementById('assets').appendChild(image)

When switching too VR, I'm trying to use the same assets to load the thumbnails

i.e.

 const thumb = document.getElementById(assetId)
 this.el.setAttribute('src', thumb.src)

However the browser is reloading the assets.

In this comment https://stackoverflow.com/a/44868733/2884250

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 I've attempted to add the files to the THREE.Cache (I'm assuming as a src)

 window.THREE.Cache.add(assetId, asset.url)

How then in AFRAME do I get this image into the AFRAME A-IMAGE Entity as a src?

Answer 1

Figured it out..

Add the image to the cache with the ID

 image.onload = () =>  window.THREE.Cache.add(assetId, image)

And use the ID as the SRC

this.el.setAttribute('src', '#'+assetId)