Error loading glb model - webpack electron react typescript

I am having difficulty loading the glb model. I get this error:

My code:

import React from "react";
// import * as BABYLON from 'babylonjs';
import "@babylonjs/loaders"
import { FreeCamera, Vector3, HemisphericLight, MeshBuilder, Color4, StandardMaterial, Texture, SceneLoader } from "@babylonjs/core";
import SceneComponent from "./SceneComponent"; // uses above component in same directory
import grassTex from './assets/grass2.jpg'
import flowerYellow from './assets/models/flower-yellow.glb'

// import SceneComponent from 'babylonjs-hook'; // if you install 'babylonjs-hook' NPM.

// let box;
let ground;
const onSceneReady = async (scene) => {
    scene.clearColor = new Color4(0, 0, 0, 0)
    var camera = new FreeCamera("camera1", new Vector3(0, 1.1, -1), scene);
    const canvas = scene.getEngine().getRenderingCanvas();
    camera.attachControl(canvas, true);
    var light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);
    light.intensity = 0.7;
    // box = MeshBuilder.CreateBox("box", { size: 2 }, scene);
    // box.position.y = 1;
    ground = MeshBuilder.CreateGround("ground", { width: 10, height: 1.3 }, scene);
    ground.position.z = -1.1
    ground.material = new StandardMaterial('groundMaterial', scene)
    ground.material.diffuseTexture = new Texture(grassTex, scene)
    ground.material.diffuseTexture.uScale = ground.material.diffuseTexture.vScale = 10;
    // SceneLoader.ImportMesh("", '', flowerYellow, scene, function (newMeshes) {
    //     console.log(newMeshes)
    // })
    // console.log(scene)
    const importResult = await SceneLoader.ImportMeshAsync(

// const onRender = (scene) => {
// if (box !== undefined) {
//     var deltaTimeInMillis = scene.getEngine().getDeltaTime();
//     const rpm = 10;
//     box.rotation.y += (rpm / 60) * Math.PI * 2 * (deltaTimeInMillis / 1000);
// }
// };

export default () => (
            // onRender={onRender} 
            id="my-canvas" />

Help me understand what the problem is and in what direction

Welcome to the community !!!

should have the url of the asset as the second parameter. an empty string is not valid.

To get more help, try to always repro in the playground.

I don’t believe you can comment JSX with ‘//‘. I’m not on a computer as I’m just boarding a flight, so just a guess. I think you need ‘{ /*… */ }’ to comment.

So you can comment

If the whole component

I managed to load the model, but no textures.
Model with textures throws an error. The loader cannot handle the base64 format.
I found a solution in the BABYLON documentation. But this solution doesn’t work. I keep getting the same error.

What packages do I need to install?

Is your model loading in the sandbox ?

If yes could you share a repro ?

Yes, the model works in the sandbox.
I am using webpack.
I installed the @babylonjs/core and @babylonjs/loaders packages


1 Like

currently the file you use does not load for me in the sandbox either:


The standard scene works

Could you repro the issue in the playground ? it would be way simpler for us to troubleshoot.

when it fails - have you look at the dev tools network tab to make sure the textures are available?

You have an empty rootUrl ( SceneLoader | Babylon.js Documentation (, but I think think it should be:

SceneLoader.Append('./assets/models/flower-blue/', 'flower-red.glb', scene, (model) => console.log(model));

My experience is that the base URL is loaded for dependent assets like textures (ie: Base_Material_baseColor.png). Anyway, have a look in network tab if additional network requests are being made and verify those assets are returning images properly.

1 Like

Thank you all for your answers!
I solved it like this:

import fileGLB from "./assets/test.glb" 
SceneLoader.Append(fileGLB, '', scene, (model) => console.log(model));
1 Like

I’m having a similar issue here.
At the moment I’m working with vitesse
Combining the following: Vue 3, Vite 2, pnpm, ESBuild, this gives us the perfect combination.
I would like to embed our babylon js scene into this webdev build.

However I’m having some issues implementing or bundling model files (glb for ex) into the babylon env.
Typescript is throwing this error: Cannot find module './../assets/EPSI.glb' or its corresponding type declarations.ts(2307)
The image file in the same location is found, but the model file (glb) can’t be loaded it seems?

How could I resolve this?
Thanks alot!

maybe you meant ../../assets/EPSI.glb? I’m not sure why people want to bundle models actually… what is the reason for that?