在 ThreeJS 中预加载纹理和图像？

【问题标题】：Preload Textures and Images in ThreeJS?在 ThreeJS 中预加载纹理和图像？
【发布时间】：2015-09-18 05:59:44
【问题描述】：

我想问是否有一个简单的解决方案可以在 ThreeJs 中预加载纹理和图像。我将它们全部加载到一个数组中： myTextureArray.push(new THREE.ImageUtils.loadTexture('../textures/floor_red.jpg');

如何检查是否以及何时成功加载所有纹理？

这里是旧版本链接：http://museum.baraq.de/

感谢您的帮助！

【问题讨论】：

标签： javascript three.js textures preload

【解决方案1】：

Three.js 中有一个Loading Manager，您可以使用它来跟踪您加载的纹理或对象。

示例实现：

var textureManager = new THREE.LoadingManager();
textureManager.onProgress = function ( item, loaded, total ) {
    // this gets called after any item has been loaded
};

textureManager.onLoad = function () {
    // all textures are loaded
    // ...
};

var textureLoader = new THREE.ImageLoader( textureManager );
var myTextureArray = [];
var myTexture = new THREE.Texture();
myTextureArray.push( myTexture );

textureLoader.load( 'my/texture.jpg', function ( image ) {
    myTexture.image = image;
} );

在 Three.js r71 中测试。

【讨论】：