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ファイルで表示することができました。
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; まとめ 同様のエラーでお困りの方の参考になりましたら幸いです。
...
2023年3月29日 · 更新: 2023年3月29日 · 1 分 · Nakamura
