Attempting to create babylon scene for first time results in error

Hello all,

I attempted to install babylon js with npm install, and then tried to create a basic document and was returned this error:
image

Here is my code setup:

<body>
  <canvas id=“renderCanvas”></canvas>
  <script src="https://cdn.babylonjs.com/babylon.max.js"></script>
  <script type="module" src="/main.js"></script>
</body>
import * as BABYLON from "babylonjs";
// Get the canvas DOM element
// Create a canvas element
// Get the canvas DOM element
var canvas = document.getElementById("renderCanvas");
// Load the 3D engine
var engine = new BABYLON.Engine(canvas, true, {
  preserveDrawingBuffer: true,
  stencil: true,
});
// CreateScene function that creates and return the scene
var createScene = function () {
  // 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 using the SphereBuilder
  var sphere = BABYLON.MeshBuilder.CreateSphere(
    "sphere1",
    { segments: 16, diameter: 2, sideOrientation: BABYLON.Mesh.FRONTSIDE },
    scene
  );
  // Move the sphere upward 1/2 of its height
  sphere.position.y = 1;
  // Create a built-in "ground" shape;
  var ground = BABYLON.MeshBuilder.CreateGround(
    "ground1",
    { width: 6, height: 6, subdivisions: 2, updatable: false },
    scene
  );
  // Return the created scene
  return scene;
};
// call the createScene function
var scene = createScene();
// run the render loop
engine.runRenderLoop(function () {
  scene.render();
});
// the canvas/window resize event handler
window.addEventListener("resize", function () {
  engine.resize();
});

Everything should work from what I’ve seen on the docs, but famous last words. I am also able to console log out BABYLON with no problem so I know the import doesn’t have an issue.

Hello and welcome to the Babylon community!

The setup here looks a bit strange. You mention using npm install, and you’re using module imports, but you’re also loading the library through a script tag. When using script tags, you don’t need npm, neither imports. There’s an example here: Getting Started - Chapter 1 - Setup Your First Web App | Babylon.js Documentation (babylonjs.com). Can you remove the import statement and see if it works?

Apologies. I had a script tag to babylon in my html but I actually did that after it wasn’t working. So my html code actually appeared like this:

<body>
  <canvas id=“renderCanvas”></canvas>
  <script type="module" src="/main.js"></script>
</body>

I have tried your new script and it also seems to be working, but I would like to get this working with npm install and imports. I will report back with findings.

For npm you’ll have to have a way to bundle the code, there’s a very good example here: RaananW/babylonjs-webpack-es6: Babylon.js basic scene with typescript, webpack, es6 modules, editorconfig, eslint, hot loading and more. Will even make coffee if you ask nicely. (github.com)

Yes I am bundling the code in vite, a way better alternative to webpack. This should work, as I have it working with three js and many other libraries, but it seems to fail with Babylon JS. Any idea why that might be? Thank you for taking the time to reply.

If you will perform all steps mentioned here - Using Vite with Babylon.js | Babylon.js Documentation - you will have working template in several minutes.

Thank you, I will look into that. I do think it would be nice if the npm install instructions worked universally.

They do work. If you don’t want to setup from scratch, you may use Vite+Babylon boilerplate - GitHub - paganaye/babylonjs-vite-boilerplate

1 Like