Unable to Download GLB file with GLTFLoader

I have a problem with Downloading GLB file with GLTFLoader in React.
It shows this error SyntaxError: Unexpected token < in JSON at position 0
at Object.parse ()
at GLTFLoader.parse (GLTFLoader.js:100)
at Object.onLoad (GLTFLoader.js:52)
at XMLHttpRequest. (three.module.js:23674)

This is my part of code

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

this.loader = new GLTFLoader();

this.loader.load("./bread.glb", gltf => {


  this.renderer.render(this.scene, this.camera);
}, undefined,

error => {

Advance Thank You.

1 Like

Can you please share bread.glb in this thread?

1 Like

bread.glb (2.2 MB)

Here Please

I’m not able to reproduce the issue, see

Is it possible for you to share your repository?

BTW: I’m hungry now :hamburger: :drooling_face:


This is the repository, if you comment this line import fileGlb from ‘./bread.glb’ (GLB FILE) in App.js file

and change fileGlb in this.loader.load(fileGlb, gltf => {… }) to ’ ./bread.glb ’ you will get that ERROR .
I found this IMPORT FROM approach in web but it is not solution for that issue.

It does work if I put bread.glb in the public folder of your project. This is actually the root directory for your app, not src.


Huge Huge Thank You.
Next Time When I will Be in Germany I will order Hamberger for you :grinning:


Boris could you help me figure out where I am making mistake?
This example works, but how I cant do it with glb file format ?

you can download with GLTFLoader here is the article about it.


The code should be actually identical. You just use a different URL.

Can you please share bread.glb in this thread?

Wow, I didn’t expect WebGL Developers’ salary, in Germany, to be so low, that they have to ask for bread on online forums :scream: (with sick rhymes while theyre at it :sunglasses:)

Im SORRY, jokes are not my strongest suit :neutral_face:


Boris could you help me figure out where I am making mistake?
This example works, but how I cant do it with glb file format ?

There is no need to change the loader nor the code - only the url. GLB files are also GLTF files, except in binary form :slight_smile:

TypeError: this.THREE.GLTFLoader is not a constructor

I get this error when I try to add path to model instead of link for some reason

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?

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);