I’ve noticed that TextureLoader seems to have a different loading process for loading images.
I’ve used an image as a texture and used the same image on an image element in the same page. I noticed that Chrome sent 1 request for each instance even though they are both the same image. Shouldn’t it be already cached once loaded by any of the requests?
You can see that the path of the request is different (small, medium etc.), only the image name is the same. So for Chrome - these are different images.
You should either unify these paths (they may also be generated by three as an asset directory, it’s not easy to tell without seeing how you set it up.), or cache requests manually using a custom proxy.
Try to enable caching via:
THREE.Cache.enabled = true;
Can still replicate
Looked at three.js/src/loaders/TextureLoader.js at 470f9cd136fe4ed060dbe6badd6f03c2d8454215 · mrdoob/three.js · GitHub and it seems like TextureLoader is the only loader actually not supporting three’s cache - it’s available only via FileLoader-derivatives. Though I may be very wrong.
Could you share what’s in viewer.controller.ts:133 (initiator for the repeated request) ? If it was three, it would show same initiator as the first request.
Unfortunately, that’s not true. TextureLoader is internally using ImageLoader which makes use of THREE.Cache.
But I can still replicate the issue. I tried setting the flag to true on the very first code of my app but it still sends a separate request
Once again - you seem to be sending this request separately, independently from three.
It calls a service that loops and calls TextureLoader’s load method.
This still doesn’t answer my question. If THREE already requested the resource, why would the browser still request the same resource if I use it on an image tag upon inserting in my DOM?
We can only guess without seeing the code why Chrome ignores the cache. It’s probably the easiest to check in dev tools under Network -> Img. Find the file request and see the cache headers:
If it’s a local server it may disable cache altogether, since its useless during development. It may also happen that you are sending the second request when the first one isn’t finished yet.
So basically you’re saying this is more of an environment or browser thing and not a three thing?
It may be - but it’s just a guess. Can you share a screenshot of the request headers?
