Richtige Methode zum Aktualisieren der Textur (THREE.JS)

Question

Ich habe einige Kontrollkästchen booleans, die verschiedene Texturen zu einer Kugel in three.js laden.

Ich renne in das Problem dieser Bilder nicht schnell genug geladen, was zu einer Beeinträchtigung der Leistung. Ich kann mir vorstellen, dass ich sie vorher laden muss, aber ich bin mir nicht sicher, wie das am besten aussehen könnte. Ich schließe auch meinen aktuellen Code ein, da es möglicherweise eine bessere Lösung insgesamt oder einen nicht benötigten Code von mir gibt.

function showPoliticalMap(){ 
    var world = scene.getObjectByName("world").children[1], 
     cloud = scene.getObjectByName("cloud"), 
     uri = world.material.map.image.baseURI; 

    scene.remove(cloud); 
    spotlight.intensity = 0; 
    ambientLight.intensity = 1; 
    world.material.map.image.currentSrc = uri + "img/earthmapoutlineblue_optimized.jpg"; 
    world.material.map.image.src = uri + "img/earthmapoutlineblue_optimized.jpg"; 
    world.material.map.needsUpdate = true; 
    world.material.needsUpdate = true; 
} 

Answer 1

Wenn Sie Wolken entfernen und die Lichtintensität ändern möchten, nachdem die Textur geändert wurde, müssen Sie die Textur vorher laden. Sie können dazu die TextureLoader verwenden, überprüfen Sie die documentation. Im folgenden Beispiel brauchen Sie den Download-Fortschritts-Callback nicht wirklich, aber der Fehler-Callback könnte gut sein, um ihn zu behalten.

function showPoliticalMap(){ 
    var world = scene.getObjectByName("world").children[1], 
     cloud = scene.getObjectByName("cloud"), 
     uri = world.material.map.image.baseURI; 

    // instantiate a loader 
    var loader = new THREE.TextureLoader(); 

    // load a resource 
    loader.load(
     // resource URL 
     uri + "img/earthmapoutlineblue_optimized.jpg", 
     // Function when resource is loaded 
     function (texture) { 
      // do something with the texture 
      world.material.map = texture; 
      world.material.needsUpdate = true; 

      scene.remove(cloud); 
      spotlight.intensity = 0; 
      ambientLight.intensity = 1; 
     }, 
     // Function called when download progresses 
     function (xhr) { 
      console.log((xhr.loaded/xhr.total * 100) + '% loaded'); 
     }, 
     // Function called when download errors 
     function (xhr) { 
      console.log('An error happened'); 
     } 
    ); 
} 

Ich habe es nicht getestet, also nicht sicher, ob es direkt funktioniert, aber es zeigt das Prinzip davon trotzdem.