在html中请求图像后，three.js再次请求同一图像

Question

这是代码

＆＃13;

＆＃13;

let texture = new THREE.TextureLoader().load("http://odf9m3avc.bkt.clouddn.com/1493817789932.jpg")

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
<img class='preLoad' src = 'http://odf9m3avc.bkt.clouddn.com/1493817789932.jpg' style='display:none'>

＆＃13;

＆＃13;

＆＃13;

我希望浏览器在解析html时加载图像，而不是等待three.js初始化然后请求图像。

例如

＆＃13;

＆＃13;

// this image only request once,other img tags use it directly

＆＃13;

<img src='http://odf9m3avc.bkt.clouddn.com/1493817789932.jpg'>
<img src='http://odf9m3avc.bkt.clouddn.com/1493817789932.jpg'>
<img src='http://odf9m3avc.bkt.clouddn.com/1493817789932.jpg'>

＆＃13;

＆＃13;

＆＃13;

但为什么three.js请求它而不是直接使用它

这是浪费时间 我怎么解决呢？ 谢谢！

Answer 1

你可以试试这个，

创建一个id为img的元素，

<img src="YOUR_URL" id="preloaded-image">

加载页面后，您可以通过

获取此元素

var picture = document.getElementById( 'preloaded-image' ); 

现在使用此图像

创建一个three.js纹理

var texture = new THREE.Texture();
texture.image = picture;
texture.needsUpdate = true;

现在您可以使用此纹理。我希望它不会再次请求该文件（我还没有测试过它）