synchronisation contre chargement de la texture asynchrone dans trois.js

Question

Je joue avec Three.js pendant mon heure de lunch, implémentant les anciennes démos de NEHE (jusqu'à # 30 jusqu'à maintenant). Un aspect qui semble ennuyeux est le nouveau chargeur de texture asynchrone. J'ai un matériau shaders démo où le matériau est créé comme ceci:

var uniforms = { 
    tOne: { type: "t", value: THREE.ImageUtils.loadTexture("images/cover.png") }, 
    tSec: { type: "t", value: THREE.ImageUtils.loadTexture("images/grass.png") } 
}; 
var material_shh = new THREE.ShaderMaterial({ 
    uniforms: uniforms, 
    vertexShader: vertShader, 
    fragmentShader: fragShader 
}); 
var mesh = new THREE.Mesh(cubeGeom, material_shh); 
gfxScene.add(mesh); 

Cela fonctionne très bien, mais Three.js couine à moi dans la console qui LoadTexture est dépréciée. (Pourquoi?). Quoi qu'il en soit, je peux écrire à utiliser un TextureLoader comme ceci:

var textureLoader = new THREE.TextureLoader(); 
var cover, grass; 
textureLoader.load("images/cover.png", function(texture) { 
    cover = texture; 
}); 

textureLoader.load("images/grass.png", function(texture) { 
    grass = texture; 

    var uniforms = { 
     tOne: { type: "t", value: cover }, 
     tSec: { type: "t", value: grass } 
    }; 

    var material_shh = new THREE.ShaderMaterial({ 
     uniforms: uniforms, 
     vertexShader: vertShader, 
     fragmentShader: fragShader 
    }); 

    var mesh = new THREE.Mesh(cubeGeom, material_shh); 
    gfxScene.add(mesh); 
}); 

Cela fonctionne aussi, mais semble plutôt alambiquée. Je comprends que asynch est bon pour les applications web, etc. mais ... Et cela suppose que je suis certain que cover.png sera chargé avant grass.png. Est-ce que c'est garanti? Je préférerais simplement m'en tenir à l'utilitaire loadTexture synchrone, mais il existe peut-être une bonne raison de ne pas utiliser loadTexture (à part qu'il est obsolète). TIA.

Answer 1

TextureLoader.load() retourne l'objet texture, donc si vous n'êtes pas concered sur la synchronisation des charges, vous pouvez utiliser la nouvelle TextureLoader de la même manière:

var textureLoader = new THREE.TextureLoader(); 
var uniforms = { 
    tOne: {type: "t", value: textureLoader.load("images/cover.png")}, 
    tSec: {type: "t", value: textureLoader.load("images/grass.png")} 
}; 

Edit # 1

Pour synchrone charger, vous pouvez utiliser le LoadingManager. Ce n'est pas l'API la plus élégante en ce moment, mais cela devrait fonctionner pour des cas simples. Cet exemple concerne la version r84.

function loadTextures(urls, callback) { 

    var textures = []; 

    var onLoad = function() { 
     callback(null, textures); 
    }; 

    var onProgress = function() {}; 

    var onError = function(url) { 
     callback(new Error('Cannot load ' + url)); 
    }; 

    var manager = new THREE.LoadingManager(onLoad, onProgress, onError); 

    var loader = new THREE.TextureLoader(manager); 

    for (var i=0; i<urls.length; i++) { 
     textures.push(loader.load(urls[i])); 
    } 
} 

var urls = [ 
    "images/cover.png", 
    "images/grass.png" 
]; 

loadTextures(urls, function(error, textures) { 
    if (error) { 
     console.log(error); 
     return; 
    } 
    // Main code goes here using the textures array 
});