Help Load STL files ASCII or Binary to calculate Volume and Dimensions

Questions
, ,
1

Hello,
I am a Junior Developer and I am interested to try and make a small app that calculates the volume (cm3) and overall dimensions of an stl file.
I have been trying to navigate the three.js docs, examples and forums but they are all too advanced.
My MVP is to have a use load an stl file and output the volume and dimensions.
Can anyone share an easy way to make this JavaScript?

My thoughts are I would need to load the stl file.
Check if it’s ASCII or Binary
Parse the file
Output the results.

Any guidance would be greatly appreciated.
Thank you

2

Hi!
Have a look at this SO thread:

and this related forum topic:

3 Likes
3

@prisoner849 thanks for the links!
I was able to get the stl volume working now I just need to figure out how to get the overall dimensions.

4

If you want to get the size of your model, you can use THREE.Box3() with its .getSize() method:

var obj = _your_loaded_model;

var size = new THREE.Vector3();
var box = new THREE.Box3().setFromObject( obj );
box.getSize(size);

console.log(size); // dimensions of your model are in the 'size' variable now
3 Likes
5

Thanks for the help again.
I have been trying to debug but when I try the getSize method I get the following error;

three.min.js:395 Uncaught TypeError: c.updateMatrixWorld is not a function
at Wa.expandByObject (three.min.js:395)
at Wa.setFromObject (three.min.js:392)

Here is my function I also tried the sample code you provided and got the same error;

function getSize(geometry) {
let size = new THREE.Vector3();
let box = new THREE.Box3().setFromObject(geometry);
return box.getSize(size);
}

console.log(‘GETSIZE’, getSize(benchy));

6

Why do you pass a geometry instead of a mesh to your function?
https://threejs.org/docs/index.html#api/en/math/Box3.setFromObject

7

Hmm I was trying to pass in the stl file geometry was just the property name I was using for the variable benchy in the function call.

I’m not sure of the correct way to pass the stl file into the function.

8

Any chance to provide a live code example or the link to your page?

10

Okay, another option is to use geometry’s bounding box:

var loader = new THREE.STLLoader();
loader.load(benchy, function(geometry) {
  let calculatedStlVolume = Math.round(getVolume(geometry));
  // console.log("stl volume is " + getVolume(geometry));
  document.querySelector('#stlVolume').textContent = calculatedStlVolume;

  let stlSize = getSize(geometry);
  // then write it somewhere in your user interface or do something else :)
});

. . .

function getSize(geometry) {
  let size = new THREE.Vector3();
  geometry.computeBoundingBox();
  geometry.boundingBox.getSize( size );
  return size;
}
3 Likes
11

Thanks so much for your help!
That works great and I get a very nice output object with the size :slight_smile:

n {x: 60.00100135803223, y: 31.003999710083008, z: 48}

x: 60.00100135803223
y: 31.003999710083008
z: 48

12

Last question, is it possible to load an stl file or path locally for the user on the client-side?
I am trying to get the stl file to be uploaded locally and then call the parsed data.
https://github.com/3daddict/js-stl-parser/tree/v1 <- updated repo

13

Take a look at the source code of the editor and see how it loads different formats:

14

I’ve been trying to implement the File API and FileReader but I have not been able to get it to work.
Here is my current code: https://github.com/3daddict/js-stl-parser/tree/dev
Can you take a look and let me know what multiple things I am doing wrong?