THREE.TextureLoader（）多次加載相同的紋理（即20次或更多次）

Question

THREE.TextureLoader（）以意外和錯誤的方式運行。類的load（）函數多次嘗試/加載相同的資產（即20次或更多次）。

用來裝載和使用的紋理代碼如下旁邊：

Element.prototype.createShaderMaterial = function (uniforms, vertexShader, fragmentShader) { 
    var loader = new THREE.TextureLoader(); 
    uniforms.texture.value = loader.load(this.texture); 

    return new THREE.ShaderMaterial({ 
     uniforms: uniforms, 
     vertexShader: vertexShader, 
     fragmentShader: fragmentShader, 
     wireframe: true 
    }); 
}; 

您還可以找到一個實時預覽

下面的圖是使用瀏覽器控制檯說明這種行爲這裏：https://alexprut.github.io/earth-defender/ 和遊戲代碼在這裏：https://github.com/alexprut/earth-defender/tree/master/client/js

做錯了什麼？爲什麼相同的圖像被加載多次？

Answer 1

事實是THREE.TextureLoader()不會默認緩存紋理，但我認爲它應該，或者至少問你是否要這樣做。 這意味着如果您有400個具有相同紋理的對象，庫將爲同一資產發出400個HTTP請求。

下面是一個簡單的解決方案（Singleton模式/模塊模式）緩存​​模塊：

var TextureLoader = (function() { 
    var _instance = null; 

    var Loader = function() { 
     var _loader = new THREE.TextureLoader(); 
     var _cache = []; 

     function _cachePush(elem, val) { 
      _cache.push({ 
       element: elem, 
       value: val 
      }); 
     } 

     function _cacheSearch(elem) { 
      for (var i = 0; i < _cache.length; i++) { 
       if (_cache[i].element === elem) { 
        return _cache[i].value; 
       } 
      } 

      return false; 
     } 

     function load(texture) { 
      var match = _cacheSearch(texture); 

      if (match) { 
       return match; 
      } 

      var val = _loader.load(texture); 
      _cachePush(texture, val); 

      return val; 
     } 

     return { 
      load: load 
     } 
    }; 

    function getInstance() { 
     return (_instance) ? _instance : _instance = Loader(); 
    } 

    return { 
     getInstance: getInstance 
    } 
})(); 

使用和緩存您需要調用質地：

TextureLoader.getInstance().load(texture);