Unable to Download GLB file with GLTFLoader

[Boris_Bek]

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 => {

  // ADD MODEL TO THE SCENE
  this.scene.add(gltf.scene);

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

error => {
  console.log(error);
});

Advance Thank You.

[Mugen87]

Can you please share bread.glb in this thread?

[Boris_Bek]

@Mugen87

thread

bread.glb (2.2 MB)

Here Please

[Mugen87]

I’m not able to reproduce the issue, see

Is it possible for you to share your repository?

BTW: I’m hungry now

[Boris_Bek]

BekBoris/3Js-React-Model-Positioning

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.
THANK YOU.

[Mugen87]

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.

[Boris_Bek]

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

[Danijel_Demirovic]

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 ?

[Boris_Bek]

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

https://threejs.org/docs/index.html#examples/en/loaders/GLTFLoader

[Mugen87]

@Danijel_Demirovic

This example works, but how I cant do it with glb file format ?

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

[DolphinIQ]

[Mugen87]
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 (with sick rhymes while theyre at it )

Im SORRY, jokes are not my strongest suit

@Danijel_Demirovic

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

[Danijel_Demirovic]

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

[DolphinIQ]

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

[Danijel_Demirovic]

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?

[DolphinIQ]

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

[ashleynguci]

@DolphinIQ

https://gltf-viewer.donmccurdy.com/

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.

[Mugen87]

@ashleynguci

Unexpected token < in JSON at position 0

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.

[ashleynguci]

nice. Thanks.

[Danijel_Demirovic]

I think the problem was because my file needed to be in the public folder
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

[Mugen87]

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