Solving issues while loading glb file while using babylon and react

Questions
, ,
1

Hi I am trying to add a mini-game while using babylon through react application. So I have added a scene in a react component.
I get an error while trying to load a .glb file. I get the following error.

BJS - [15:06:48]: Unable to load from …/assets/sample.glb: importMesh of undefined from undefined version: undefined, exporter version: undefinedimportMesh has failed JSON parse.

PS: The 3D file is stored in a location in my local file system.

CODE BLOCK:

BABYLON.SceneLoader.ImportMesh(“”, “…/assets/”, “sample.glb”, scene, function (newMeshes) {
// Set the target of the camera to the first imported mesh
camera.target = newMeshes[0];
});

PS: The 3D file is stored in a location in my local file system.

FILE STRUCTURE
Screenshot from 2022-08-24 15-39-22

DEPENDENCIES
“dependencies”: {
“@babylonjs/core”: “^5.20.0”,
“@babylonjs/gui”: “^5.20.0”,
“@babylonjs/loaders”: “^5.20.0”,
“@testing-library/jest-dom”: “^5.16.5”,
“@testing-library/react”: “^13.3.0”,
“@testing-library/user-event”: “^13.5.0”,
“babylonjs-loaders”: “^5.20.0”,
“react”: “^18.2.0”,
“react-dom”: “^18.2.0”,
“react-scripts”: “5.0.1”,
“web-vitals”: “^2.1.4”
}

2

This error usually happens when you don’t load the glTF loader into your project. are you importing from @babylonjs/loaders prior to loading the glb?

3

Hi…
Yes I did import @babylonjs/loaders . But the error remains unsolved.

import ‘babylonjs-loaders’;

4

That’s not @babylonjs/loaders , that’s a different package. you need to import @babylonjs/loaders

5

@RaananW thank you so much. I spent half a day on this xD
Devil is always in the details.

But I’m running into another error now…

BJS - [23:24:22]: Unable to load from ../assets/sample.glb: RuntimeError: Unexpected magic: 1329865020

1 Like
6

Hi.
I’ve still been getting this warning inspite of importing the loaders. Could this be the reason for me not able to import gltf/glb assets.

BJS - [13:34:46]: Unable to find a plugin to load .159:8081/ipfs/xyz files. Trying to use .babylon default plugin. To load from a specific filetype (eg. gltf) see: https://doc.babylonjs.com/how_to/load_from_any_file_type

This is a warning. Followed by the following error.

 BJS - [13:34:55]: Unable to load from http://3.7.57.159:8081/ipfs/xyy: importMesh of undefined from undefined version: undefined, exporter version: undefinedimportMesh has failed JSON parse
7

If the filename doesn’t have an extension you will need to provide it when loading/importing. It is the last variable of the import function. if it is a glb, the extension should simply be “.glb”

8

Thanks @RaananW . Solved the issue.
This doc was really helpful Using External Assets In the Playground | Babylon.js Documentation

1 Like
9

Hi sharath, Im new to babylonjs and getting exactly same error like yours, I have imported loaders but now getting error “Unable to load from …/models/Pillow.glb: RuntimeError: Unexpected magic: 1329865020”.
how did you resolve loading glb issue from local folder.
Thanks in advance

10

Hi Pavan…
The key was to split URL into two parts ‘URL’ & ‘FILENAME’ and also to follow additional instructions from this link in the documentation.

PS: Loading assets from the internet was easier than loading it from local.

11

Hey sharath, This is the code im using.

addModels = () => {
BABYLON.SceneLoader.ImportMesh(“Pillow”, “…/models/”, “Pillow.glb”, scene);
};

Is it better to have assets in repo and use URL to import files?

12

I would recommend loading assets from a public github repository or dropbox. That is what worked for me.

But I believe the error is caused due to an incorrect path. ( Are the number of dots correct?)

Good luck :slight_smile:

1 Like
13

I will try with Github repo then and path is also correct.
folder

and the path i have mentioned is…

addModels = () => {
BABYLON.SceneLoader.ImportMesh(“Pillow”, “…/models/”, “Pillow.glb”, scene);
};

1 Like
14

1329865020 translates to <!DO which probably is the beginning of an HTML page, which probably means that the server was unable to serve the request for some reason and served out an HTML page with some error code and message. The magic values for a GLB (i.e. the first four bytes of the file) is supposed to be the four characters glTF. Try accessing the URL directly and see if you can find out what the error is.

1 Like
15

Thanks sir but i have made a asset folder in github and now fetcing models using Url. Now it is working fine.

1 Like