正確的方法來更新紋理（THREE.JS）

Question

我有一些複選框布爾值，加載到three.js球體不同的紋理。

我遇到了這些圖片加載速度不夠快的問題，對性能造成了一些阻力。我想我需要預先加載它們，但不確定最好的方法。我還包括我現在的代碼，因爲可能有更好的解決方案或我的一些不必要的代碼。

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

如果要在紋理更改後移除雲層並更改光照強度，則需要先加載紋理。您可以使用TextureLoader進行此操作，請檢查documentation。在下面的示例中，您不需要下載進度回調，但錯誤回調可能很好。

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'); 
     } 
    ); 
} 

我還沒有測試過它，所以不知道它是否會直接工作，但它顯示了它的原理。