Can't seem to make gltf or glb files work with nuxt3 and babylon

Questions
1

Hello, i’m trying to import custom models in my nuxt/babylon project, i get this error: “Unable to load from …/public/models/tv.gltf: OK”.
The code is this one:

import {
  Engine,
  Scene,
  ArcRotateCamera,
  Vector3,
  Color4,
  MeshBuilder,
  DirectionalLight,
  SceneLoader,
} from "@babylonjs/core";

import "@babylonjs/loaders/glTF";


const Model = (canvas) => {
  const engine = new Engine(canvas, true);
  const scene = new Scene(engine);
  scene.clearColor = new Color4(0, 0, 0, 1);
  // scene.debugLayer.show();
  const camera = new ArcRotateCamera(
    "Camera",
    -Math.PI / 2,
    Math.PI / 3,
    4,
    new Vector3(0, 0, 0)
  );
  const light = new DirectionalLight(
    "DirectionalLight",
    new Vector3(-1, 1, 1),
    scene
  );

  const light1 = new DirectionalLight(
    "DirectionalLight",
    new Vector3(-1, -10, 1),
    scene
  );



  camera.attachControl(canvas, true);

  const tv = SceneLoader.Append("../public/models/", "tv.gltf", scene);
  


  engine.runRenderLoop(() => {

    scene.render();
  });
};

export { Model };

and this is a simple javascript file that then is processed in my app.vue like this:

<script setup>

  import { onMounted, ref } from "vue";
  import { Model } from "./scenes/tv.js";


  const canvas = ref(null);
  onMounted(() => {
    if (canvas.value) {
      Model(canvas.value);
    }
  });
</script>

<template>

      <canvas class="w-full h-56" ref="canvas" />
     
</template>
2

ok guys i solved it, you don’t need to put the /public in the path

const tv = SceneLoader.Append("/models/", "tv.gltf", scene);
1 Like
3

Hi Youssfe, I am also considering using Babylon.js in a Nuxt 3 project. Since this is quite a new combination option, would you mind sharing how you set it up and your experiences with it so far? Any hints / pitfalls using Babylon with Nuxt (Vite, SSR, etc. …) are much appreciated!