После запроса изображения в html, three.js снова запрашивает то же изображение

Question

Это код

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

<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'>

Я хочу, чтобы браузер загружал изображение при разборе HTML, а не в ожиданииинициализация three.js, а затем запрос изображения.

например

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

<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'>

но почему три.js запрашивает его, а не использует его напрямую

Это пустая трата времени.
Как я могу решитьэто?
спасибо！

Answer 1

Вы можете попробовать это,

Создать элемент 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;

Теперь вы можете использовать эту текстуру.Я надеюсь, что он не будет запрашивать файл снова (я не проверял)