When running in dev mode (I’m developing a Angular webapp), it loads the mesh, but when we build the app and deploy it, it fails loading the mesh with the message:
Already cheched that the loaders are imported in the project, if we remove the loader at all, the error message is different (indicating that the loader was not found)
Would be easier to check if you could put it on an open ip address so we could check it.
Just guessing… check the prod build if it is bundling everything that is needed. Are you minifying and obfuscating? Try disabling those and check if it works. Then enable one, check, enable other check until you find the one which is optimizing out more than it should.
I’m not really used to these tech/framework but when some similar happens to me, I try to load the file as a data array or a string to check if it’s the api that I’m using incorrectly or it’s some file access issue.
I don’t know the form the ‘production’ bundle looks like but I’d try to look inside to see if my file is actually bundled inside or not.
It 's inside, then it’s a URL resolving issue. if it’s not, then I’d try to look on how to bundle asset files.
As always, assume anything can fail and check each part of the pipeline (file in bundle, file discoverable, file loadable, bjs api used correctly)
The glTF loader will eventually create blob urls for images inside a glb. It is unlikely that there is an issue with serving the glb since the glb is downloaded completely before it gets processed (unless the useRangeRequests option set).
But I think the error is related to “Content Security Policy”. I didn’t see before, but now I found this error log:
Refused to load the image 'blob:http://localhost:8080/1ea83ebb-a85c-4a74-9c6b-84e1575829a7' because it violates the following Content Security Policy directive: "img-src 'self' data:".
This is new for me, I’ll try to understand what is this content security policy and check why in production it’s blocking those dinamic blob urls.
The issue was indeed related to content security policy (and not with BabylonJS or the glb file itself).
In production, the following content policy was being applied:
img-src ‘self’ data:
Since the glb loader generates some images with blob urls (that starts with blob:) for the textures, they were being blocked.
To solve, I just added blob: to the content security policy:
img-src ‘self’ data: blob:
I’m deploying a jhipster application (https://www.jhipster.tech/), so, specifically for jhipster, if anyone else is having the same issue, the solution is to add the blob: in the content-security-policy property inside the application.yml file (that’s why in dev was working, but not when deployed in production).
But if you’re using another web framework and this issue is ocurring, you probably have to configure the content-security-policy somewhere to allow for blob urls in the images.
