How to use babylonjs/loaders or SceneLoader to load glTF models?

Hi ,I created a RCA project which uses typescript template and wrote a small demo and tired to load a glTF model.

This is my project directory:

and this is my App.tsx file:

But after running, there are always various problems, they were randomly occured,sometimes it is a blank page, as shown in the following figure:

Either it is a file import error,

Or there will be the same problem as this one

Just like this question, I don’t really understand how to load models. In the official documentation, the SceneLoader.Append() method is usually used to load models, but at the same time, the babylonjs/loaders dependency is provided.

I tried to use babylonjs/loaders to load the model, I added the externalFileTypes.d.ts file, and then made the following changes to App.tsx:

Finally I got a blank page,again!

I think there must be something wrong with the way I load the model, but I really don’t know how to solve it, I have tried all the methods I know so far.

Any advice would be much appreciated. Thank you for reading.

This feels like a misconfigured packer (webpack, if you are using it). The imported model variable should be a URL, otherwise babylon will not be able to load it. Maybe this can help -

babylonjs-webpack-es6/webpack.common.js at master · RaananW/babylonjs-webpack-es6 (

(just make sure to add gltf to the url-loader party)

I still feel confused, how can I make changes in the RCA project? :cold_sweat:

I tried to use SceneComponents.tsx, and then used SceneLoader.Append () method to import, as shown in the following figure:

No error is reported this time, but the model is not displayed:

Might be related to the react context.
If you can reproduce that somehow and show the project, we might be able to help.

It‘s my project ,please have a look :pensive::

My tyepscipt react version is 4.2.4

Ah,I solved it,It’s a problem with my camera lens settings :sweat_smile:

1 Like