Overview

I encountered an error when attempting to load a .glb file in Nuxt3 x babylon.js, so this is a memo of how I resolved it.

Error Details

The following error occurred:

Unable to load from ./models/test.glb: importScene of undefined from undefined version: undefined, exporter version: undefinedimportScene has failed JSON parse

Solution

The issue was resolved by additionally installing the following package:

npm install @babylonjs/loaders

As a result, I was able to display the model with the following JavaScript file:

import {
  Engine,
  Scene,
  FreeCamera,
  Vector3,
  HemisphericLight,
  SceneLoader,
} from "@babylonjs/core";
import "@babylonjs/loaders/glTF";

const myScene = {
  engine: null,
  scene: null,

  // Function to create the scene
  createScene: function (canvas) {
    // Initialize engine and scene
    const engine = new Engine(canvas);
    const scene = new Scene(engine);
    myScene.engine = engine;
    myScene.scene = scene;

    // Camera setup
    const camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);
    camera.setTarget(Vector3.Zero());
    camera.attachControl(canvas, true);

    // Light setup
    new HemisphericLight("light", Vector3.Up(), scene);

    // Load GLB model
    SceneLoader.Append(
      "./models/",
      "test.glb",
      scene,
      function (/*newMeshes*/) {
        // const mesh = scene.meshes[0];
        // Create or update the camera and light in the scene
        scene.activeCamera = null;
        scene.createDefaultCameraOrLight(true);
        scene.activeCamera.attachControl(canvas, false);
      }
    );

    // Rendering loop
    engine.runRenderLoop(() => {
      scene.render();
    });
  },
};

export default myScene;

Summary

I hope this helps anyone experiencing a similar error.