ImportMeshAsync error

Bugs
1

I know this question has come up a lot, but none of the solutions I’ve seen are working for me.

I’m getting this error:

Uncaught (in promise) RuntimeError: Unable to load from ./assets/models/tree.glb: importMesh of undefined from undefined version: undefined, exporter version: undefinedimportMesh has failed JSON parse
    at errorHandler (index.js:49172:40)
    at Object.importMesh (index.js:122760:9)
    at index.js:49205:27
    at dataCallback (index.js:49048:7)
    at index.js:16809:5
    at XMLHttpRequest.onReadyStateChange (index.js:16905:17)

I’m trying to import a mesh like so:

 SceneLoader.ImportMeshAsync(['tree'], './assets/models/', 'tree.glb', undefined, undefined, '.glb').then((result) => {
   const tree = result.meshes[0];
   tree.position = new Vector3(0, 0, 0);
 });
}

Here are my imports:

import { Engine, HemisphericLight, Scene, SceneLoader, UniversalCamera, Vector3 } from '@babylonjs/core';
import { Inspector } from '@babylonjs/inspector';
import { EcsEngine } from './ecsEngine';
import { Section, TrackComponent } from './components/track.component';
import { Entity } from 'tick-knock';
import { initSystems } from './startup/systemRegistration';
import { LocomotiveComponent } from './components/locomotive.component';
import '@babylonjs/loaders/glTF';

and my package.json:

{
  "name": "boxcar",
  "module": "index.ts",
  "type": "module",
  "devDependencies": {
    "bun-types": "^1.0.14"
  },
  "peerDependencies": {
    "typescript": "^5.0.0"
  },
  "dependencies": {
    "@babylonjs/core": "^6.31.0",
    "@babylonjs/inspector": "^6.31.0",
    "@babylonjs/loaders": "^6.31.0",
    "eslint": "^8.54.0",
    "prettier": "^3.1.0",
    "tick-knock": "^4.2.0"
  }
}

You can find the whole repo here: GitHub - ThomasBurgess2000/boxcar at choo-choo (relevant file is src/game.ts)

2

Check your GLB, it throws errors in any GLTF viewer.
image

image
image1108×662 10.6 KB

3

Bizarre, it works for me in the sandbox and the 3d viewer on Windows. Also the magic number error is a different type of error I believe, one that only happens after it has correctly tried to load it as glb. The JSON parse error makes me think it didn’t get that far.

Screenshot_20231217-055246
Screenshot_20231217-0552461440×3120 182 KB

4

Do you use the same file that in GH repo?

5

The version on GH is saying ‘trying to load tree’? Might not be fully uploaded or something else wrong with your branching.

6

Yes, when I posted that screenshot I downloaded it on my phone from the branch I linked (“choo-choo”) where the latest commit is “trying to load tree”.

I just downloaded it again on my laptop here:

image
image2146×281 32.4 KB

and it worked again in the sandbox.

But just to show that it’s not the GLB, I just pushed another asset that I’ve used in a different project and definitely works (it’s just the default blender sphere).

However, this project still returns the same error.

7

I’m using bun for the first time in case that’s relevant

8

Check if absolute URLs work.

9

It does not. For reference, previous answers to this question centered around something wrong with the loader import:

It looks like maybe you’re missing the GLTF loader. After you install the package “@babylonjs/loaders” then you can import GLTF loading support like below.

import "@babylonjs/loaders/glTF";

Turns out it was a version mismatch with the babylonjs preview npm packages and 4.2.1

removing the preview package dependencies and updating the versions worked

However, as far as I can tell, I do not have a version mismatch and am importing the correct plugin.

10

This returns false:

  const isPluginAvailable = SceneLoader.IsPluginForExtensionAvailable('.glb');

And I also noticed I was missing this warning:

index.js:6908  BJS - [21:04:36]: Unable to find a plugin to load .glb files. Trying to use .babylon default plugin. To load from a specific filetype (eg. gltf) see: https://doc.babylonjs.com/features/featuresDeepDive/importers/loadingFileTypes

I also confirmed that there are references to @babylonjs/loaders/glTF in my build/index.js file, so it seems like it’s not being tree-shaken or something.

11

what is SceneLoader2?

I can see that the gltf/glb extensions are being added here in the debugger:

if (SceneLoader2) {
  SceneLoader2.RegisterPlugin(new GLTFFileLoader);
}

While .babylon is being added in the separate SceneLoader

SceneLoader.RegisterPlugin({
  name: "babylon.js",
  extensions: ".babylon",

Here are those imports in the build file:

// node_modules/@babylonjs/loaders/node_modules/@babylonjs/core/Loading/sceneLoader.js
var SceneLoaderAnimationGroupLoadingMode2;
(function(SceneLoaderAnimationGroupLoadingMode3) {
  SceneLoaderAnimationGroupLoadingMode3[SceneLoaderAnimationGroupLoadingMode3["Clean"] = 0] = "Clean";
  SceneLoaderAnimationGroupLoadingMode3[SceneLoaderAnimationGroupLoadingMode3["Stop"] = 1] = "Stop";
  SceneLoaderAnimationGroupLoadingMode3[SceneLoaderAnimationGroupLoadingMode3["Sync"] = 2] = "Sync";
  SceneLoaderAnimationGroupLoadingMode3[SceneLoaderAnimationGroupLoadingMode3["NoSync"] = 3] = "NoSync";
})(SceneLoaderAnimationGroupLoadingMode2 || (SceneLoaderAnimationGroupLoadingMode2 = {}));

class SceneLoader2 {

// node_modules/@babylonjs/core/Loading/sceneLoader.js
var SceneLoaderAnimationGroupLoadingMode;
(function(SceneLoaderAnimationGroupLoadingMode2) {
  SceneLoaderAnimationGroupLoadingMode2[SceneLoaderAnimationGroupLoadingMode2["Clean"] = 0] = "Clean";
  SceneLoaderAnimationGroupLoadingMode2[SceneLoaderAnimationGroupLoadingMode2["Stop"] = 1] = "Stop";
  SceneLoaderAnimationGroupLoadingMode2[SceneLoaderAnimationGroupLoadingMode2["Sync"] = 2] = "Sync";
  SceneLoaderAnimationGroupLoadingMode2[SceneLoaderAnimationGroupLoadingMode2["NoSync"] = 3] = "NoSync";
})(SceneLoaderAnimationGroupLoadingMode || (SceneLoaderAnimationGroupLoadingMode = {}));

class SceneLoader {
12

it appears my modules got screwed up, deleting the bun lock and node_modules resolved the issue

2 Likes