मेरा मानना ​​है कि लोडर अभीष्ट तरीके से काम कर रहा है। यह उल्का बनावट को 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 माध्यम से कहा जाता है, वैश्विक वस्तु Cache का उपयोग करता है
लेकिन डिफ़ॉल्ट Cache.enabled है false ।

यदि आप THREE.Cache.enabled = true; three.js लोड करने के ठीक बाद सेट करते हैं
यह काम करेगा।

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