Can’t load model with npm but works with cdn

Bugs
1

Hello,
i’m trying to load a model on an html web page with these codes :

(index.html)

<!DOCTYPE html>
<html>
<head>
    <title>Babylon test</title>
    <link rel="stylesheet" href="./css/style.css">

    <!--<script src="https://cdn.babylonjs.com/babylon.js"></script>-->
    <script type="module" src="./js/start.js"></script>

</head>
<body>

    <div id="contener">
        <canvas id="renderCanvas"></canvas>
    </div>

</body>
</html>

(start.js)

import * as BABYLON from 'babylonjs';

const canvas = document.getElementById("renderCanvas");
const engine = new BABYLON.Engine(canvas, true);

const createScene = function () {

    const scene = new BABYLON.Scene(engine);

    const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3.Zero);
    camera.attachControl(canvas, true);

    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(-0.5, 1.5, 1.5));

    const box = BABYLON.MeshBuilder.CreateBox("box", {}, scene);

    return scene;
};

const scene = createScene();

engine.runRenderLoop(function () {
    scene.render();
});

(folder structure)
image

and it doesn’t work, but when i use CDN (so put my “import” at comment) it works.
i don’t understand…
did i do something wrong ?

Thanks for your help and suggestions !

2

i forgot to say that to launch my html i use the “live server” extension from Visual Studio Code

3

Did you also import the babylonjs-loaders as you can find in the readme babylonjs-loaders - npm ?

4

yes, i didn’t import it into my file but i already downloaded “babylonjs”, “babylons-materials” and “babylonjs-loaders” with the npm.

I tried to add “import ‘babylonjs-loaders’;” in my js file but it still doesn’t work.

5

Would be great if you could provide a repro on Github so that @RaananW can have a look :slight_smile: he is the module master.

6

i’m not a frequent user of git, this is good : https://github.com/DragoLeForgeron/3DWeb ?

1 Like
7

i think it is a private repository, as i am unable to see it. want to add me as a contributor? (or make it public :-))?

1 Like
8

oh i’m sorry, it should be good

1 Like
10

You have to put the actual path to the file, with extension, for it to work in the browser or use import maps if youre using chrome. Ie: from “…/…/node_modules/babylon/babylon.js. Or u can just copy it into a closer path. Alternatively, import maps create a global alias so importing from “babylon” will work. In head or top of body, just before other scripts do this


<script type="importmap">
{
"imports": {
	"babylon": "./babylon.module.js"
	}
}
</script>

Typed that on my phone so hope its ok lol

11

well…
i’ve tried many times this code on my html page and it wasn’t working.

    <script src="./node_modules/babylonjs/babylon.js"></script>
    <script src="./node_modules/babylonjs-materials/babylonjs.materials.js"></script>
    <script src="./node_modules/babylonjs-loaders/babylonjs.loaders.js"></script>

but now it seems to be working, maybe i wrote something wrong last times. :man_shrugging:

I will continue to work like that this week and i will tell you back if it worked well and then i will close the topic

2 Likes
13

the babylonjs package isnt an es module, it’s a script. es module means the code uses “export” keyword, whereas scripts just provide an iife (immediately invoked function expression) or attach themselves to window manually doing window.BABYLON = (lots of code). IIFE is just doing (() => whatever)() so it runs automatically. You can also accomplish a similar effect by putting a ! in front of functions. The ! is a short hand instruction to check for truthiness , but it still forces it to evaluate.

blah blah blah ok. TLDR
works
<script src="./node_modules/babylonjs/babylon.js"></script>
wont work
<script src="./node_modules/babylonjs/babylon.js" type="module"></script>

14

Okay, so the solution is to put this line on the head bloc of the html :

<script src="./node_modules/babylonjs/babylon.js"></script>

then simply put the code in a body bloc of the html without this line :

import * as BABYLON from 'babylonjs';
2 Likes