Error loading any type of model (PLEASE HELP)

Hello, I’m trying to load a model in my react project using babylon…
I have no idea what’s going on, It should work fine but so far none of my models loads…

If anyone can help me I would be gratefull!

The model loads fine if I drag and drop on the https://sandbox.babylonjs.com

The error:
Unable to load from model/RoboCop/RoboCop.obj: importScene of undefined from undefined version: undefined, exporter version: undefinedimportScene has failed JSON parse
Here is the main file:

import * as React from 'react';
import * as BABYLON from 'babylonjs';
import { GLTFFileLoader } from "@babylonjs/loaders/glTF"
import { OBJFileLoader } from '@babylonjs/loaders'

var createScene = function (engine: BABYLON.Engine, canvas: HTMLElement) {

    GLTFFileLoader.IncrementalLoading = false;
    console.log(OBJFileLoader.name);
    // Create a basic BJS Scene object
    var scene = new BABYLON.Scene(engine);
    // Create a FreeCamera, and set its position to {x: 0, y: 5, z: -10}
    var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene);
    // Target the camera to scene origin
    camera.setTarget(BABYLON.Vector3.Zero());
    // Attach the camera to the canvas
    camera.attachControl(canvas!, false);
    // Create a basic light, aiming 0, 1, 0 - meaning, to the sky
    //var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
    // Create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation
    //var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene, false, BABYLON.Mesh.FRONTSIDE);


    var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene, false);
    // Return the created scene

    BABYLON.SceneLoader.Append("model/RoboCop/", "RoboCop.obj", scene, function (scene) {
        // do something with the scene
    });


    return scene;
}

export default class BabylonViewer extends React.Component<{}, {}> {

    constructor({ }, { }) {
        super({}, {});
    }

    componentDidMount() {
        const canvas = document.getElementById('renderCanvas');
        (canvas! as HTMLCanvasElement).width = document.body.clientWidth; //document.width is obsolete
        (canvas! as HTMLCanvasElement).height = document.body.clientHeight;

        const engine = new BABYLON.Engine(canvas! as HTMLCanvasElement, true, { preserveDrawingBuffer: true, stencil: true });;
        var scene = createScene(engine, canvas!);
        engine.runRenderLoop(function () {
            scene.render();
        });
        window.addEventListener('resize', function () {
            engine.resize();
        });
    }

    render() {
        return (
            <>
                <canvas id="renderCanvas" ></canvas>
            </>
        )
    }
}

Can you make sure to import obj from

import { OBJFileLoader } from '@babylonjs/loaders/OBJ'

Also make sure the file is where it is supposed to be by checking the network profiler to see if there is no 404

2 Likes

I think you need to do what the docs say and import without the class name so that you get the side-effects.

https://doc.babylonjs.com/features/es6_support#loaders

import "@babylonjs/loaders/OBJ";
1 Like

See the awnser bellow please.

The import perhaps is the issue, trying to debug it right now.
If I call
console.log(OBJFileLoader.name);
the name of the loader is given to me. Very nice uh?

But latter on, I receive the following warning on the console:
BJS - [09:16:39]: Unable to find a plugin to load .obj files. Trying to use .babylon default plugin. To load from a specific filetype (eg. gltf) see: http://doc.babylonjs.com/how_to/load_from_any_file_type

I tried every sintax suggested here. None of them worked.

You can see the console.log output, the warning and the error on this image:

Thanks for the reply guys, any other thoughts?

I have absolutely no ideia whats going on… Any kind of direction to go would be helpfull!

I’m trying to debug the babylon.js code right now, I suspect the error is in the Babylon code, not mine.
(Since the loader is loaded, but babylon can’t find it.)

THE SOLUTION - DONT MIX THE ES6 WITH NON ES6 PACKAGES

1 - Install the npm package: babylonjs-loaders
2 - Add to the imports: import “babylonjs-loaders”;

OR

Use only ES6 imports:

import * as BABYLON from '@babylonjs/core'
import "@babylonjs/loaders";

Installing the respective packages.

Thanks @Deltakosh and @bghgary, without your help I would not be able to solve this issue.

:grin:

1 Like

Here is how you can contribute to the documentation Improve Documentation - Babylon.js Documentation

1 Like

The problem actually was mixing the import packages and sintaxes.
If you are aiming for ES6 you should import

import * as BABYLON from ‘@babylonjs/core’

and not
import * as BABYLON from ‘babylonjs’;

That was the root issue.

1 Like