テクスチャを更新する適切な方法（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'); 
     } 
    ); 
} 

私はそれが直接動作するかどうかわからないので、それをテストしていませんが、それはとにかくそれの原理を示しています。