Unable to Import STL, No Errors?

Just started with Babylon.js & JS (in general). I was able to load a mesh using *.CreateGroundFromHeightMap and display it locally on my own system, but the result lacked the detail contained in my larger STL models (~500GB).

I wanted to practice loading smaller (~5 to 100MB) STL models from my local machine to see if my scripting is correct, but I haven’t been getting anywhere. I was able to read several STL import issues on this forum along with the documentation related to “ImportMesh”, but I haven’t had success troubleshooting the issue. The worst part is there are no errors, just a white screen when it loads to “http://localhost:5173/”. I’m also unable to right-click the browser window to select “Console” to confirm it even loads. I can’t be sure if this means the model is failing to load.

I’m used to Python and MathLab so I’m not sure how to display my script. I’ll start by showing my main.js where we can assume “LunarSurfaceBlock.STL” is any arbitrary *.stl model:

import * as BABYLON from ‘@babylonjs/core’;
import ‘@babylonjs/loaders/STL/stlFileLoader’;

const canvas = document.getElementById(‘renderCanvas’);

const engine = new BABYLON.Engine(canvas);

const createScene = function() {
const scene = new BABYLON.Scene(engine);

const box = new BABYLON.SceneLoader.ImportMesh(“./”,“LunarSurfaceBlock.STL”, scene);

//BABYLON.STLFileLoader.DO_NOT_ALTER_FILE_COORDINATES = true;

//const box = new BABYLON.MeshBuilder.CreateGroundFromHeightMap(
//‘’,
//‘/untitled.png’,
// {
// height: 10,
// width: 10,
// subdivisions: 750
// },
// );

const camera = new BABYLON.ArcRotateCamera(“Camera”, 3 * Math.PI / 2, Math.PI / 2.5, 5, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas. true);
camera.wheelPrecision = 10;

const light = new BABYLON.DirectionalLight(‘DirectionalLight’, new BABYLON.Vector3(0, -1, -5), scene);
light.intensity = 0.5;

return scene;
}

const scene = createScene();

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

window.addEventListener(‘resize’, function() {
engine.resize();
})

Thank you in advance for any assistance making progress with this. I’m enjoying Babylon.js!

Hello and welcome!

You may open Console before starting the script. Also, there is F12 button which opens the console as well.

I am sure that browsers will not support such a big file size. How do you open 500GB file at desktop?

Did you try to load your models into Sandbox and are they correctly displayed there?

Here is the simplest PG example with STL loading - https://playground.babylonjs.com/#AJJ8U5#55
Does it work with your model?

Also, note that in this expsression in your code you need to use callback to deal with the import result

const box = new BABYLON.SceneLoader.ImportMesh(“./”,“LunarSurfaceBlock.STL”, scene);

Here is small explanation:

BABYLON.SceneLoader.ImportMesh("meshName", "url/to/parent/directory", "fileName.fileExtension", scene, function(newMeshes){
// the result of the import is in newMeshes variable, for example to find the root node use const root = newMeshes[0]
});

I am sure that browsers will not support such a big file size. How do you open 500GB file at desktop?

Loading in segments is the best way. Convincing my Matlab script to load a piece of an STL was challenging, but now I want to do it online for a remote user that doesn’t have Matlab. This way I’m not shipping the script all over and dealing with Matlab compatibility issues.

Did you try to load your models into Sandbox and are they correctly displayed there?

I had to export the *.STL via Meshlab as an *.OBJ. Then the model was able to load in Playground (drag and drop) without issue. The problem is JS Playground is not an STL viewer (currently) so if my script is incorrect I won’t be able to view my model. I did use several online STL viewers and the model pops right up so the issue is either the models being full of an incompatible datatype for Babylon OR I’m new at JS (money on the latter).

Here is the simplest PG example with STL loading -
https://playground.babylonjs.com/#AJJ8U5#55
Does it work with your model?

It does not. I’ve used the following changes to try and run this locally OR in Playground:

BABYLON.SceneLoader.ImportMesh(
“”,
“./”,
“simple-test-mesh.stl”,
scene, …

(The above script is similar to where I started before requesting help in this forum.)

You may open Console before starting the script. Also, there is F12 button which opens the console as well.

Great advice! The following error occurred when running script from Visual Studio and was visible in Console (Chrome). Now I know where the problem is, but I haven’t found a fix for it yet. I’ll troubleshoot more later today:

Uncaught TypeError: BABYLON.SceneLoader.ImportMesh is not a main.js:11 constructor
at createScene (main.js:11:15)
at main.js:42:15
createScene @ main.js:11
(anonymous) @ main.js.42

Are you able to put your STL files here to display - https://sandbox.babylonjs.com/ ?

Note that this Sandbox may accept URL as a set of values, like Babylon.js Sandbox - View glTF, glb, obj and babylon files this example with STL file.

Seems there is something wrong in your code…

Solved!

The call “new” was preventing ImportMesh from executing:

const box = new BABYLON.SceneLoader.ImportMesh(“”, “./”, “LunarSurfaceBlock.stl”, scene);

changed to…

const box = BABYLON.SceneLoader.ImportMesh(“”, “./”, “LunarSurfaceBlock.stl”, scene);

but there was more:

  • improper naming of “solid” and “endsolid” in the raw STL file (thanks MeshLab for adding “this STL was made from Meshlab” to the solid name at the start of the file).
  • model kept shifting coordinates on load until STLFileLoader.DO_NOT_ALTER_FILE_COORDINATES = true; was properly applied
  • STL model is big (~15MB) so the cameras, lighting, controls, camera minZ/maxZ had to be modified. DefaultCameraOrLight() just wouldn’t cut it and the controls were slow because of the model scale compared to the amount of mouse movement.

Without your help getting access to Console I would have been stuck for much longer. Thank you for your suggestions and support!

et volia

1 Like