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

Question

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

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

这是一个旧版本链接:http://museum.baraq.de/

感谢您的帮助!

Answer 1

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

示例实现:

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 中测试。