Generally in bundling environments the glb either has to be in the public folder, in which case the url should be /file.glb, or it can reside anywhere inside /src, but then you will have to import it so that the bundler includes it: import fileUrl from “./file.glb” The import will yield a dynamic, hashed url which you stick into the loader.
In some bundling envs it won’t work because they will ask for a suitable loader that knows how to deal with the glb extension. Most bundlers are configured to yield urls for unknown extensions though.
Personally I would always prefer the import over dumping stuff into public. That way it’s statically analyzable, possibly typeface and it will complain when it compiles if the file is missing. It’s also better for controlled caching whereas with public your users will still get served the old glb even if you modify it.
Do you have any experience loading glb files from a server url? Not by a file path.
I can do it with glft with embedded resources, but with gbl I’m getting no errors, but nothing on scene eitther. The code is basically the same you have shared before.
If you are using THREE.GLTFLoader on a server in node.js, you may want to read through Using GLTFLoader on node. It isn’t as easy, three.js is meant to be used in a browser.
Sorry for bringing back this older post but I have a similar issue.
I have a React app which loads some components containing Three.js code to load GLB/GLTF assets.
It works fine — I figured the public folder problem — but for some reason I don’t understand
one assets from the examples (LittlestTokyo.glb) won’t load even though the code is practically the same.
I was wondering if it was an issue due to glb made of a single file (no extra texture in folders) but I checked and it’s not. I can load other animated assets (from single glb) in the same folder without problem but this single one triggers an "Unexpected token ‘<’ " which doesn’t seem to be related to usual answer because the file is indeed served…
I just figured out how to use the load manager so here’s the log I get. Any idea what would be wrong with LittlestTokyo? I loads fine in online examples. I don’t understand the “blob” part though…
Hi there!. I can’t help you directly because I don’t have the expersite other folks here have. The best way to get helped is by reproduce the problem in codepen or other tool like that (vanilla JS). This will help you to figure out the real problem, and to get help from others. It’s a bit of work, but it’s a win/win. For me this helped me to undestand more threejs each time I did.
Hi @C11R11 !
Sorry yes I didn’t get the reflex to do this yet, same on another post here.
But I’m getting the hang of it
Here’s a CodeSandbox loading GLB issue - CodeSandbox
that shows the situation, kind of.
For some reason, after I removed a lot in my code, some of the models don’t show up even if they load properly (perhaps a camera or position issue, not clear). But that’s not the issue.
In my main app component (I’m using React), I can instanciate only one asset at a time with the AssetLoader component.
I commented out all the instants where the loader manages to load the model properly.
But in the case of Littlest Tokyo (not commented out) you’ll see in the console that the Loader gets stuck at “Loaded 5 of 6 files.”
Honestly my main question is why this particular asset wouldn’t load, while it loads fine in Three.js examples website. It is still part of example files after all… I do manage to load other assets (even if only the little cat shows properly in that sandbox), but those are just tests of course.
I’d like to understand why, in the future, an asset I or my collaborators made might or not be able to load
Ok I found the solution while following the Three.js Journey course (thanks Bruno Simon !), the Three.js example page using LittlestTokyo had a DracoLoader.
My “only” mistake was I kept a wrong path for the dracoLoader.setDecoderPath, hence the “unexpected token <” I couldn’t understand.
I just copied the whole draco folder from /three/examples/js/libs into my public, and set dracoLoader.setDecoderPath( ‘/draco/gltf/’ ); now it works like a charm !
