Error loading glb model - webpack electron react typescript

Bugs
1

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

image
image890×90 4.67 KB

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) => {
    console.log(flowerYellow)
    scene.clearColor = new Color4(0, 0, 0, 0)
    var camera = new FreeCamera("camera1", new Vector3(0, 1.1, -1), scene);
    camera.setTarget(Vector3.Zero());
    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)
    console.log(ground.material)
    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(
        "",
        "",
        flowerYellow,
        scene,
        undefined,
    );
    console.log(importResult)
};

// 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 () => (
    <div>
        <SceneComponent
            antialias
            onSceneReady={onSceneReady}
            // onRender={onRender} 
            id="my-canvas" />
    </div>
);

Help me understand what the problem is and in what direction

2

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.

3

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.

4

So you can comment
image

5

If the whole component
image

6

Hello!
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.

image
image753×82 4.25 KB

What packages do I need to install?

7

Is your model loading in the sandbox ?

If yes could you share a repro ?

8

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

9

https://denistrubicin93.github.io/babylon_demo_page/
Demonstration

Code

1 Like
10

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

image
image2051×379 37.6 KB

flower-red.glb

11

The standard scene works
https://denistrubicin93.github.io/red-flower_babylon/

12

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

13

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 (babylonjs.com)), 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
14

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
15

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.

image
image1053×322 23.9 KB

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!

16

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