Error message on loading 3D model

Bugs
1

Hallo,

Not sure if this is a bug or I messed things up. Probably the last one.
I have a clean project with Webpack, typescript (ts-loader) and Babylonjs 4.1 with only the following code:

import * as BABYLON from 'babylonjs';
import 'babylonjs-loaders';

const eCanvas = document.getElementById('canvas');
const engine = new BABYLON.Engine(eCanvas, true);
BABYLON.SceneLoader.Load("./objects/generator/", "Emergency_Backup_Generator.obj", engine, function (scene) {
    alert('Loaded!')
});

But I get an “Unable to load” error:

image
image835×168 13.3 KB

However when I comment the import babylonjs as shown below it works and I receive the alert “Loaded!”.

//import * as BABYLON from 'babylonjs'

It also looks like that “import ‘babylonjs-loaders’” itself makes the window.BABYLON available, so “import * as BABYLON from ‘babylonjs’” can be left out? According to the docs this isn’t the case.

2

Why not just use the “new way” to import things based on the modular packages?

import {
    SceneLoader
} from "@babylonjs/core/Loading/sceneLoader";

You might have to do a npm install --save-dev @babylonjs (not the “@”!) first, but then everything should work. This is the ‘proper’ way to do it but the catch is that you have to import everything individually.

You can also try

import * as BABYLON from '@babylonjs/core/Legacy/legacy';

instead of what you have now, although I have never tried that myself.

See also: ES6 - Babylon.js Documentation

Welcome to the forum, by the way!

3

Thank you! You gave me the right direction. It works and my imports are as follows:

import '@babylonjs/loaders';
import {
    SceneLoader
} from "@babylonjs/core";

Not sure if it makes any difference but I imported the SceneLoader from babylonjs/core.

4

AFAIK it makes tree-shaking less effective because it includes everything in core for the final file, but that’s it. Some of the modules are not very intuitively named and I don’t want to look at my node_modules/@babylonjs folder every time, so I do “broad” imports like that too sometimes.

You could try the Google Closure Compiler plugin to still get some benefits: closure-webpack-plugin - npm. It does not do traditional tree-shaking but it has the ability to optimize out functions/methods you’re not using and optimizes your code in general, a bit like a C/C++ compiler. Haven’t used this plugin personally though, only the raw compiler, which however works great, also with Babylon.js.

And yeah, you need the import '@babylonjs/loaders'; if you want to import anything but babylon files.

Glad I could help.