Nuxt3 x babylon.jsで.glbファイルをロードする

概要

Nuxt3 x babylon.jsにおいて、.glbファイルのロードを試みた際にエラーが発生しましたので、その備忘録です。

エラーの内容

以下のエラーが発生しました。

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

対応内容

以下を追加でインストールすることで対応できました。

npm install @babylonjs/loaders

結果、以下のようなjsファイルで表示することができました。

scene.js

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

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

  // シーンを作成する関数
  createScene: function (canvas) {
    // エンジンとシーンの初期化
    const engine = new Engine(canvas);
    const scene = new Scene(engine);
    myScene.engine = engine;
    myScene.scene = scene;

    // カメラの設定
    const camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);
    camera.setTarget(Vector3.Zero());
    camera.attachControl(canvas, true);

    // 光源の設定
    new HemisphericLight("light", Vector3.Up(), scene);

    // GLBモデルの読み込み
    SceneLoader.Append(
      "./models/",
      "test.glb",
      scene,
      function (/*newMeshes*/) {
        // const mesh = scene.meshes[0];
        // シーン内のカメラとライトを作成または更新
        scene.activeCamera = null;
        scene.createDefaultCameraOrLight(true);
        scene.activeCamera.attachControl(canvas, false);
      }
    );

    // レンダリングループ
    engine.runRenderLoop(() => {
      scene.render();
    });
  },
};

export default myScene;

まとめ

同様のエラーでお困りの方の参考になりましたら幸いです。