Importing Mesh Async ".glb.txt"?

Questions
1

Hello everyone,

I want to create a Babylon.js scene in Webflow, but I can only upload .glb files as .txt. I’ve seen someone use Three.js to do this, but I can’t figure out how to import my asset this way using:

import { registerBuiltInLoaders } from "@babylonjs/loaders/dynamic";
registerBuiltInLoaders();

const createScene = async () => {
  ...
  await BABYLON.appendSceneAsync("https://cdn.prod.website-files.com/[...]model.gltf.txt", scene);
  return scene;
};

How can I do this ?
Thank you in advance for your help!

2

you are almost there, simply add the extension like this:

    await BABYLON.appendSceneAsync("https://cdn.prod.website-files.com/[...]model.gltf.txt", scene, {
        pluginExtension: ".glb"
    });
3

Super, thank you!

Unfortunately, I still get an error from the line importing the asset:

image
image1176×724 49.3 KB

The scene works fine without it. Could it be due to Vite JS? I had issues before until I discovered that I needed to add this for the Havok plugin to work in vite.config.js:

  optimizeDeps: {
    exclude: ['@babylonjs/havok'],
  }

(I tried to exclude “@babylonjs/loaders/dynamic” too but it didn’t worked)

4

It maybe because the glb loader is not loaded

Can you repro that simple code in the playground?

5

It works as intended only in the Playground:

My file start with:

import * as BABYLON from 'babylonjs';
import HavokPhysics from '@babylonjs/havok';
import { registerBuiltInLoaders } from "@babylonjs/loaders/dynamic";
registerBuiltInLoaders();

And it doesn’t work even if I only add what’s in the Playground after this.

6

You mix 2 types of import, with @ and without @
Change the first import to
import * as BABYLON from '@babylonjs/core/Legacy/legacy';

If this will be not enough, change the loaders import to
import "@babylonjs/loaders/glTF";

1 Like
7

It works now!
Thank you both for your quick responses :pray:

It seems like the main issue was the

import { registerBuiltInLoaders } from "@babylonjs/loaders/dynamic";
registerBuiltInLoaders();

instead of

import "@babylonjs/loaders/glTF";

I didn’t understand well how to use the first one as the documentation say

2 Likes
8

cc @ryantrem to be sure there are no issues as this should work ?

9

The errors in your original screenshot seemed like they were due to a mix of importing from UMD and ES6. Once you have everything importing from ES6 packages (as @labris suggested), then using registerBuiltInLoaders should work fine (and is often a better choice because it allows code splitting in yoru final bundle, where the loader code is not downloaded to the client until you actually load a model of that type). If you have everything working with import "@babylonjs/loaders/glTF" and you just switch that one part back to:

import { registerBuiltInLoaders } from "@babylonjs/loaders/dynamic";
registerBuiltInLoaders();

Do you get errors when loading a model, and if so, what are they?

2 Likes
10

I tried and got no errors, thanks for your help!

1 Like