Error loading glb model - webpack electron react typescript

Hello!
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) => {
    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

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
image

If the whole component
image

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.


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

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

Code

1 Like

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

flower-red.glb

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

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 (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

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