How to Vite with Babylon.js (Game Tutorial Series)

Tutorials and tips
21

Hey, this was really helpfull man thanks! I was wondering how you would make the 3d view fullscreen though, if anyone help it would be appreciated

22

Fullscreen PG example - https://www.babylonjs-playground.com/#AUTZQ4#1

2 Likes
23

I’m having trouble importing meshes while using Vite. My assets are in the public directory and I try to load them like this:

const myLoadedAsset = await SceneLoader.ImportMeshAsync("", "/", "my-asset.glb", this.scene)

I’ve also tried replacing “/” with “./” and “”. In my Next.js app it works fine with “./”, but I can’t seem to get anything to work with Vite. I keep getting the error:
exporter version: undefinedimportMesh has failed JSON parse

24

Try (scene is optional parameter)

const myLoadedAsset = await SceneLoader.ImportMeshAsync("", "my-asset.glb")

It should work.
Here is the example with absolute URL which works in Vite:

    const res = await BABYLON.SceneLoader.ImportMeshAsync(
      "",
      "https://raw.githubusercontent.com/eldinor/ForBJS/master/level5.glb"
    );

If all this doesn’t work check your loaders import.

import "@babylonjs/loaders";

And loaders must be the same version as the Babylon core.

1 Like
25

Thank you! I had forgotten to import the loaders at the top of my file:

import "babylonjs-loaders";

Once I added this it works perfectly!

1 Like