Unable to Download GLB file with GLTFLoader

Could you post your loading code here, as well as how you include the GLTFLoader ?

This is working example…
And when I want to add path of my glb file it shows error “Unexpected token < in JSON at position 0”. Maybe its bad 3DModel file?
image.png

Your loading code looks correct.
Have you checked if the file works in online gltf model viewers, for example https://gltf-viewer.donmccurdy.com/ ? That’s a good way to test whether the problem lies within your code or your model :slight_smile:

1 Like

Hei, this is cool. I put my gltf file there, and it shows the scene. But same issue, it shows “Unexpected token < in JSON at position 0” when put it to the project.

This error usually indicates that your web server does not serve a glTF asset but a HTML file. Make sure you inspect the HTTP response of your request and ensure valid glTF content.

1 Like

nice. Thanks.

I think the problem was because my file needed to be in the public folder :smiley:
Can you help me with setting up position of my model? In attached photo you can see that legs are in center position , and I want the whole model to be vertically centered… ! thank you

It’s normally best if you author the model’s center in a DCC tool like Blender. If you have to do this in code, you can compute the AABB of the model and then use it to center it. Meaning:

const object = gltf.scene;
const aabb = new THREE.Box3().setFromObject( object );
const center = aabb.getCenter( new THREE.Vector3() );

object.position.x += (object.position.x - center.x);
object.position.y += (object.position.y - center.y);
object.position.z += (object.position.z - center.z);

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.

is it possible can i use glb model using the glTF loader?

Yes, GLTFLoader supports both .gltf and .glb files.

Hi all,

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.

Cheers!

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.

1 Like

I’m Looking closer with files now… the file with issues still won’t load (others loads fine).

Do you have any clue if this error (the picture from gltf.insimo) have something to do with my problem?

Thanks!

image

Unfortunately gltf.insimo.com produces invalid glTF files, I don’t recommend using it. I’ve tried to report this to the developers: https://github.com/InSimo/three-gltf-viewer/issues/3

1 Like

Good thanks. I think is a zoom to object problem. In the threejs editor does not appear either

Hello everyone

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… :confused:



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. :slight_smile:

1 Like

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 :smiley:

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 :slight_smile:

Thanks in advance for your help !

Julien

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 !