THREE.TextureLoader() 多次加载相同的纹理（即 20 次或更多）答案

【问题标题】：THREE.TextureLoader() loads the same texture multiple times (i.e. 20 times or more)THREE.TextureLoader() 多次加载相同的纹理（即 20 次或更多）
【发布时间】：2016-10-02 15:32:53
【问题描述】：

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

做错了什么？为什么同一张图片会被多次加载？

【问题讨论】：

标签： javascript three.js

【解决方案1】：

事实上THREE.TextureLoader() 默认情况下不缓存纹理，但我认为它应该，或者至少问你是否不这样做。这意味着如果您有 400 个具有相同纹理的对象，该库将为相同的资源发出 400 个 HTTP 请求。

下面是一个简单的解决方案（单例模式/模块模式）缓存模块：

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

【讨论】：