Cannot install GLTF loader es6 module

Questions
1

Hello,

I try to load a gtlf file.

I use vitejs

In a fresh install of vitejs i load a simple scene. (i use vue)
Here the component

<template>
  <canvas class="Scene" ref="canvas" />
</template>

<script setup>
import { Engine, Scene, Vector3, FreeCamera, HemisphericLight, SphereBuilder, StandardMaterial, SceneLoader } from "@babylonjs/core"
import "@babylonjs/loaders"
import { onMounted, ref } from 'vue'
export const canvas = ref(null)

onMounted(() => {
  const engine = new Engine(canvas.value, true, {preserveDrawingBuffer: true, stencil: true})
  const scene = new Scene(engine)
  const camera = new FreeCamera('camera1', new Vector3(0, 0, 10), scene)
  camera.setTarget(Vector3.Zero())
  camera.attachControl(canvas.value, false)
  const light = new HemisphericLight('light1', new Vector3(0, 1, 0), scene)
  const sphere = SphereBuilder.CreateSphere( "sphere", { diameter: 2, segments: 32 }, scene);
  engine.runRenderLoop(() => {
    scene.render()
  })

  SceneLoader.ImportMesh(
    "",
    "https://models.babylonjs.com/CornellBox/",
    "cornellBox.glb",
    scene, 
    meshs => {
			console.log(mesh)
  })
})
</script>

I’ve try a lot a thing, but i never make the gltf import works :confused:
I always got

importMesh of undefined from undefined version: undefined, exporter version: undefinedimportMesh has failed JSON parse

Really need some help/advise please :slight_smile:

Thanks you

2

I’ve change the method to import module

import { Engine } from "@babylonjs/core/Engines/engine"
import { Scene } from "@babylonjs/core/scene"
import { Vector3 } from "@babylonjs/core/Maths/math.vector"
import { FreeCamera } from "@babylonjs/core/Cameras/freeCamera"
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight"
import { Mesh } from "@babylonjs/core/Meshes/mesh"
import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder"
import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial"
import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader"

import "@babylonjs/loaders/glTF"

Still have a error when i try to load a glb

  SceneLoader.ImportMeshAsync(
    "",
    "https://models.babylonjs.com/CornellBox/",
    "cornellBox.glb",
    scene, 
    meshs => {
			console.log(mesh)
  })

TypeError: Cannot read property 'plugin' of undefined
1 Like
3

Ok i got it !

Need to import le plugin like that

import { GLTFLoader } from "@babylonjs/loaders/glTF/2.0/glTFLoader"

Here the working code if anyone want it

<template>
  <canvas class="Scene" ref="canvas" />
</template>

<script setup>
import { Engine } from "@babylonjs/core/Engines/engine"
import { Scene } from "@babylonjs/core/scene"
import { Vector3 } from "@babylonjs/core/Maths/math.vector"
import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera"
import { HemisphericLight } from "@babylonjs/core/Lights/hemisphericLight"
import { Mesh } from "@babylonjs/core/Meshes/mesh"
import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder"
import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial"
import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader"
import { GLTFLoader } from "@babylonjs/loaders/glTF/2.0/glTFLoader"

import { onMounted, ref } from 'vue'

export const canvas = ref(null)

onMounted(() => {
  const engine = new Engine(canvas.value, true, null, true)
  const scene = new Scene(engine)
  const camera = new ArcRotateCamera("ArcRotateCamera", 2, 1.45, 4, new Vector3(0, 0, 0), scene)
  camera.setTarget(Vector3.Zero())
  camera.attachControl(canvas.value, false)
  new HemisphericLight('light', new Vector3(0, 1, 0), scene)
  engine.runRenderLoop(() => scene.render())

  SceneLoader.ImportMesh(
    "",
    "https://models.babylonjs.com/Marble/marble/",
    "marble.gltf",
    scene,
    m => {
      console.log(m)
    }
  )
})
</script>

in vite.config.js

export default {
  optimizeDeps: { 
    include: [
      '@babylonjs/core/Engines/engine',
      '@babylonjs/core/scene',
      '@babylonjs/core/Maths/math.vector',
      '@babylonjs/core/Cameras/arcRotateCamera',
      '@babylonjs/core/Lights/hemisphericLight',
      '@babylonjs/core/Meshes/mesh',
      '@babylonjs/core/Meshes/meshBuilder',
      '@babylonjs/core/Materials/standardMaterial',
      '@babylonjs/core/Loading/sceneLoader',
      '@babylonjs/loaders/glTF/2.0/glTFLoader',
    ],
  },
}
4 Likes