New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
THREE.TextureLoader() loads the same texture multiple times (i.e. 20 times or more) #9824
Comments
I believe the loader is working in the intended way. Its loading the meteor textures 200 times because you are asking it to. The loader could be modified to automatically cache and return assets that you ask it to load multiple times, but this may not be wanted in all cases. The browser will be managing the cache so if all the headers on the image file are correct, the browser will return cached versions of the image each time. In your code:
I would consider adding something like the following:
So you manage a cache of materials that get loaded from an array rather than regenerated everytime. This will work well if all the asteroids have the same material, or use the .clone() method if you want the materials to be different. See if that helps out. |
@calrk thanks it solves the problem. I still believe
I think by default the loader should cache the textures for performance reasons (if I'm wrong please let me know why). Below is a simple solution (Singleton pattern / Module pattern) cache module: 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
}
})(); To use and cache the texture you need to call: TextureLoader.getInstance().load(texture); |
If you set three.js/src/loaders/XHRLoader.js Line 22 in 2f469f3
Line 9 in f65e669
|
Description of the problem
The THREE.TextureLoader() behaves in an unexpected and erroneous way. The load() function of the class tries/loads the same assets multiple times (i.e. 20 times or more).
Below in figure is illustrated this behaviour using the browser console:
The code used to load and use textures follows next:
For debugging purposes you can also find a live preview here: https://alexprut.github.io/earth-defender/ and the game code here: https://github.com/alexprut/earth-defender/tree/master/client/js
Three.js version
Browser
OS
Hardware Requirements (graphics card, VR Device, ...)
The text was updated successfully, but these errors were encountered: