Error while importing mesh from local folder

Bugs
1

Hi everyone, I’m new to Babylonjs.
I started with basic project with light, camera and basic models in glb format but when i try to importMesh from same folder, I’m getting error saying that “Unable to find a plugin to load .glb files. Trying to use .babylon default plugin. To load from a specific filetype (eg. gltf)”.

The code that i wrote is

import React, { Component } from “react”;
import * as BABYLON from “babylonjs”;

var scene;
var boxMesh;

class BabylonScene extends Component {
constructor(props) {
super(props);
this.state = { useWireFrame: false, shouldAnimate: false };
}

componentDidMount = () => {
// start ENGINE
this.engine = new BABYLON.Engine(this.canvas, true);

//Create Scene
scene = new BABYLON.Scene(this.engine);

//--Light---
this.addLight();

//--Camera---
this.addCamera();

//--Meshes---
this.addModels();

// Add Events
window.addEventListener("resize", this.onWindowResize, false);

// Render Loop
this.engine.runRenderLoop(() => {
  scene.render();
});

//Animation
// scene.registerBeforeRender(() => {
//   boxMesh.rotation.y += 0.01;
//   boxMesh.rotation.x += 0.01;
// });

};

componentWillUnmount() {
window.removeEventListener(“resize”, this.onWindowResize, false);
}

onWindowResize = event => {
this.engine.resize();
};

/* Add Lights */
addLight = () => {

// Create a basic light, aiming 0,1,0 - meaning, to the sky.
var light = new BABYLON.HemisphericLight(
  "light1",
  new BABYLON.Vector3(0, 10, 0),
  scene
);

};

/* Add Camera */
addCamera = () => {
// ---------------ArcRotateCamera or Orbit Control----------
var camera = new BABYLON.ArcRotateCamera(
“Camera”,
Math.PI / 2,
Math.PI / 4,
4,
BABYLON.Vector3.Zero(),
scene
);
camera.inertia = 0;
camera.angularSensibilityX = 250;
camera.angularSensibilityY = 250;

// This attaches the camera to the canvas
camera.attachControl(this.canvas, true);
camera.setPosition(new BABYLON.Vector3(5, 5, 5));

};

/*** Add Models */
addModels = () => {

BABYLON.SceneLoader.ImportMesh("Pillow", "../models/", "Pillow.glb");

};

render() {
return (
<canvas
style={{ width: window.innerWidth, height: window.innerHeight }}
ref={canvas => {
this.canvas = canvas;
}}
/>
);
}
}
export default BabylonScene;

2

You have to install and import babylon-loaders too :slight_smile:

1 Like
3

Thanks but now im getting new error. “unable to load from …/models/Pillow.glb: RuntimeError: Unexpected magic: 1329865020”

4

that means there is something wrong with the glb. is it hosted correctly? when you load the URL, does the glb loaded correctly? did you try the glb in our sandbox?

5

Yes RaananW, I have uploaded glb file in babylonjs sandbox its working fine. But when i have them in local folder and tey to import mesh im getting error.

folder

And here is the source code

addModels = () => {
BABYLON.SceneLoader.ImportMesh(“Pillow”, “…/models/”, “Pillow.glb”, scene);
};

And error im getting in console is

BJS - [16:15:39]: Unable to load from …/models/Pillow.glb: RuntimeError: Unexpected magic: 1329865020

6

My assumption is that the source folder is not hosted by your webpack configuration (as it shouldn’t). You probably have a public/static folder? move the file there. Otherwise you will need to “import” it in your code and have a file or url loader in webpack to convert the glb file to a readable URL. First option is easier :slight_smile:

1 Like