로더가 의도한 대로 작동하고 있다고 생각합니다. 당신이 요청하기 때문에 유성 텍스처를 200번 로드합니다. 로더는 여러 번 로드하도록 요청한 자산을 자동으로 캐시하고 반환하도록 수정할 수 있지만 모든 경우에 필요한 것은 아닙니다. 브라우저는 캐시를 관리하므로 이미지 파일의 모든 헤더가 정확하면 브라우저는 매번 이미지의 캐시된 버전을 반환합니다.

코드에서:

this.maxMeteorietes = config.maxMeteorietes || 200;

Game.prototype.createMeteorites = function (numMeteorites) {
    var meteorites = new THREE.Object3D();
    for (var i = 0; i < numMeteorites; i++) {
        var meteorite = new Meteorite().create(
            this.createUniforms(),
            this.createVertexShader(),
            this.createFragmentShader()
        );

    ....

}

Meteorite.prototype.create = function (uniforms, vertexShader, fragmentShader) {
    return new THREE.Mesh(
        new THREE.SphereGeometry(5, 5, 5),
//This line is called 200 times, and as such your loader.load() function will be called 200 times.
        this.createShaderMaterial(uniforms, vertexShader, fragmentShader)
    );
};

나는 다음과 같은 것을 추가하는 것을 고려할 것입니다.

var cache = [];
var loader = new THREE.TextureLoader();  //don't need a local version of this object

Element.prototype.createShaderMaterial = function (uniforms, vertexShader, fragmentShader) {
    if(cache[this.texture]){
        return cache[this.texture]; //cache[this.texture].clone();
    }
    uniforms.texture.value = loader.load(this.texture);

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

    cache[this.texture] = shader;

    return shader;
};

따라서 매번 재생성되지 않고 어레이에서 로드되는 재료 캐시를 관리합니다. 이것은 모든 소행성이 같은 재료를 가지고 있으면 잘 작동하고 재료를 다르게 하려면 .clone() 메서드를 사용하십시오.

그것이 도움이되는지 확인하십시오.

@calrk 덕분에 문제가 해결되었습니다.

나는 여전히 THREE.TextureLoader() 이 예기치 않은 방식으로 동작한다고 생각합니다. 텍스처를 캐시할지 여부를 묻습니다. 예:

var loader = THREE.TextureLoader();
loader(texture, cache = false);

기본적으로 로더는 성능상의 이유로 텍스처를 캐시해야 한다고 생각합니다(제가 틀렸다면 이유를 알려주세요).

다음은 간단한 솔루션(싱글톤 패턴/모듈 패턴) 캐시 모듈입니다.

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

XHRLoader TextureLoader 를 통해 ImageLoader TextureLoader 에서 호출되는 XHRLoader ImageLoader 는 전역 개체 Cache
하지만 기본 Cache.enabled 는 false 입니다.

three.js 불러오기 직후에 THREE.Cache.enabled = true; 를 설정했다면
그것은 효과가있을 것입니다.

https://github.com/mrdoob/three.js/blob/2f469f327a10c7780c9bc69f876f9ed5049587f2/src/loaders/XHRLoader.js#L22

https://github.com/mrdoob/three.js/blob/f65e669af99feb518e31756d793a9688a2578fbd/src/loaders/Cache.js#L9

6834