Aframe Three.js Javascript 缓存图像答案

【问题标题】：Aframe Three.js Javascript caching imagesAframe Three.js Javascript 缓存图像
【发布时间】：2019-10-12 13:14:25
【问题描述】：

我在 React 层和 AFRAME VR 层之间共享一堆图像。

我已将图像预加载到资产实体中（不使用 aframe 资产管理器，因为这些资产是在运行时动态加载的）

即

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

在切换 VR 时，我正在尝试使用相同的资源来加载缩略图

即

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

但是浏览器正在重新加载资产。

在此评论https://stackoverflow.com/a/44868733/2884250

在 AFrame 中将图像加载为 img 不会将它们存储在 THREE.Cache 中因此图像被加载了两次。但是，如果您将图像加载为一个资产项目。

所以我尝试将文件添加到 THREE.Cache（我假设为 src）

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

然后如何在 AFRAME 中将此图像作为 src 放入 AFRAME A-IMAGE 实体中？

【问题讨论】：

标签： three.js aframe

【解决方案1】：

想通了..

用ID将图片添加到缓存中

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

并使用ID作为SRC

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

【讨论】：