Problem with loading gtlf in Babylon.JS

Questions
1

Hello) I’m just starting to learn Babylon.JS and I came across a problem that I spent half a day working with, read all the documentation and the Internet, but for some reason I couldn’t solve it… I want to upload an gLTF 3D model to my scene. To do this, as I found out, you need to install additional modules. Besides @babylonjs/core, I installed @babylonjs/loaders. I use babylon inside React. That’s how I load the model:

const wardrobe = SceneLoader.ImportMesh('', './', 'scene.gltf', scene, (meshes, particleSystems, skeletons) => {
      console.log('Meshes')
      console.log(meshes)
    },
    (progress) => {
      console.log('In progress')
      console.log(progress)
    },
    (scene, msg, exception) => {
      console.error(msg)
      console.error(exception)
    })

And it’s my imports:

import {
  Scene,
  Vector3,
  FreeCamera,
  HemisphericLight,
  MeshBuilder,
  HavokPlugin,
  PhysicsAggregate,
  PhysicsShapeType,
  SceneLoader,
} from "@babylonjs/core";
import "./App.css";
import BabylonScene from "./components/BabylonScene";
import HavokPhysics from '@babylonjs/havok'
import '@babylonjs/loaders'

. However, I get an errors like on scrennshot.

2024-03-13_19-20-41
2024-03-13_19-20-411920×1080 244 KB

I don’t understand why. I’ve been digging into node_modules, trying to figure out how all these packages are connected, but I haven’t come up with anything. Help please

2

check the path to your model … ?

3

Of course, it’s correct

4

did you import { GLTFFileLoader } from “@babylonjs/loaders/glTF”;?

6

How do I do this? GLTFFileLoader does not accept any arguments. I changed my import to yours, but I got errors on screenshot. I got this before. This code:

2024-03-13_20-15-50
2024-03-13_20-15-501920×1080 282 KB

const wardrobe = SceneLoader.ImportMesh('', './', 'scene.gltf', scene, (meshes, particleSystems, skeletons) => {
      console.log('Meshes')
      console.log(meshes)
    },
    (progress) => {
      console.log('In progress')
      console.log(progress)
    },
    (scene, msg, exception) => {
      console.error(msg)
      console.error(exception)
    })

was left unchanged

7

Try to replace your line where you import babylon/loaders with the one i gave you.

Also go to babylon sandox and import your gltf model there to see if it’s working

1 Like
8

I think it’s a URL issue

image
image1116×279 22.3 KB

Please check whether the Request URL path as “http:localhost:3000/scene.gltf”

9

SceneLoader.RegisterPlugin(new GLTFFileLoader())
Did you run this line of code to register the plugin?
SceneLoader.LoadAssetContainer
Try loading gltf this way.

10

Do I understand correctly that the gLTF format for display should also contain a bin file and additional files (if this is described inside gltf)? I loaded this model using three js, everything was ok, but when I tried to load it into Babylon Sandbox, it throws errors like Unable to load from file:scene.gltf: /images/2/uri: Failed to load ‘textures/Shelf5_normal.png’: 0. I tried loading in different ways, but it still doesn’t display(( this is how the folder with the model looks like

image
image1920×1080 181 KB

11

I change my import on yours, and answer you above: Problem with loading gtlf in Babylon.JS - #6 by sokolovv-39

12

It’s working! It was written in the documentation that you need to specify a relative path, and I did so. I looked at the console, and I have there http://localhost:3000/scene.gltf . It turns out that in this code

    const wardrobe = SceneLoader.ImportMesh('', './3D/wardrobe/', 'scene.gltf', scene, (meshes, particleSystems, skeletons) => {
      console.log('Meshes')
      console.log(meshes)
    },

the second argument does not affect the relative path, but to the public directory. After moving everything to public, it worked! And thanks to Problem with loading gtlf in Babylon.JS - #9 by xiehangyun, because without SceneLoader.RegisterPlugin(new GLTFFileLoader()) it’s not working

1 Like
13

Did you manage to completely solve the issue?

14

Yes, thanks)