Importing a mesh only works with active Inspector

Questions
,
1

I asked this question already on StackOverflow already, but I guess this is the correct forum.

I have a strange problem in my angular app and I can’t figure what the difference is when using the Inspector and when not.
I am importing a mesh like this:

SceneLoader.ImportMesh("", "assets/models/", "model.gltf", this.scene, function(model) {});

But then I get this error:

Unable to load from assets/models/model.gltf: importMesh of unknown

Only when I start it with Inspector like this

Inspector.Show(this.scene, {});

the model is loaded correctly.

The model was exported from Blender in glTF Embedded format and it worked with Three.js also.

2

Welcome aboard!

It seems that you did not import the Babylon.js package correctly in your project. Using the inspector will download some packages under the hood (I think), which would explain why it works.

However, it looks a bit strange because SceneLoader is part of Babylon core, so nothing would work if you did not import this package (you could not even create the engine)…

Let’s cc @RaananW who should be able to help you with this.

3

Yes, it seems like you didn’t load the loaders package before loading the model. If you are using the es6 version of the packages, you should make sure to import the glTF version you want from @babylonjs/loaders

Want to share the project?

4

Thanks for the fast replies!

Well, the whole project is too big but the main parts are not that much:

The imports:

import {
  Engine,
  FreeCamera,
  Scene,
  Light,
  Mesh,
  Color3,
  Color4,
  Vector3,
  HemisphericLight,
  StandardMaterial,
  DynamicTexture,
  Space,
  MeshBuilder,
  PointsCloudSystem,
  ArcRotateCamera,
  Camera,
  AbstractMesh,
  Axis,
  SceneLoader,
  PointerEventTypes
} from "@babylonjs/core";
import { IWheelEvent } from "@babylonjs/core/Events/deviceInputEvents";

and then I create the scene:

public createScene(canvas: ElementRef<HTMLCanvasElement>): void {
    // The first step is to get the reference of the canvas element from our HTML document
    this.canvas = canvas.nativeElement;
    this.canvas.style.height = "50%";
    this.canvas.style.width = "100%";
    // Then, load the Babylon 3D engine:
    this.engine = new Engine(this.canvas, true);

    // create a basic BJS Scene object
    this.scene = new Scene(this.engine);
    this.scene.useRightHandedSystem = true;
    this.scene.clearColor = new Color4(0, 0, 0, 0);
    this.addZoomControl(this.scene);
    this.setFreeCamera();
    this.setTopDownCamera();
    this.checkInputs();

    // create a basic light, aiming 0,1,0 - meaning, to the sky
    this.light = new HemisphericLight("light1", new Vector3(0, 1, 0), this.scene);
    
    //this.loadModel();
    SceneLoader.ImportMesh("", "assets/models/", "model.gltf", this.scene, );
      // Debugging Editor
    Inspector.Show(this.scene, {});

    //this.showWorldAxis(8);

  }
5

My answer is still correct :slight_smile:

add import "@babylonjs/loaders/glTF" to the import section and it will work.

2 Likes
6

Thanks, it really was that simple

2 Likes