1

I'm trying to create a server/webpage that works as follows:

  1. Client uploads an .stl file that they want 3D-printed
  2. Server runs a mesh repair script on the .stl file
  3. The newly repaired .stl file is rendered in the client's browser so they can confirm that the script didn't alter the .stl file in a bad way

The problem I'm having is with step 3. I'm trying to use this example from the three.js repo to render the .stl file:

https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_stl.html

The problem is, if the model in the .stl file is too large you can't see the entire thing. I can fix this so that the entire model is in view of the camera by playing around with the three parameters in the mesh.scale.set(x, y, z) function in this code block:

var loader = new THREE.STLLoader();
loader.addEventListener( 'load', function ( event ) {

    var geometry = event.content;
    var mesh = new THREE.Mesh( geometry, material );

    mesh.position.set( 0, - 0.37, 0 );
    mesh.rotation.set( - Math.PI / 2, 0, 0 );
    mesh.scale.set( 2, 2, 2 );

    mesh.castShadow = true;
    mesh.receiveShadow = true;

    scene.add( mesh );

} );
loader.load( './models/stl/binary/pr2_head_tilt.stl' );

However, I would like to know how to automatically recognize the size of the model in the .stl file, and scale it accordingly.

I know it is possible, as GitHub has achieved this with their STL file viewer. You can see how it works by navigating here and clicking on one of the .stl files:

https://github.com/mrdoob/three.js/tree/master/examples/models/stl/binary

Basically the GitHub STL file viewer is exactly what I want to emulate, since it loads any .stl file cleanly without requiring the user to zoom-in/out to properly view the model.

gman
  • 100,619
  • 31
  • 269
  • 393
tranceGuy
  • 13
  • 1
  • 3

1 Answers1

1

How much of a model is visible in your viewport does depend on your camera parameters and how you have set up your scene. You can use the .boundingBox or .boundingSphere of the Geometry to figure out how big the model is and then use some heuristic to scale it down or up appropriately to what you would like to achieve. There is also a BoundingBoxHelper that can help you visualize the extends of your model.

In addition you can look at: How to Fit Camera to Object and Adjusting camera for visible Three.js shape

Community
  • 1
  • 1
gaitat
  • 12,449
  • 4
  • 52
  • 76
  • This is pretty much the only way? The easiest would probably be to scale every model to the same height using the bounding box. Slightly more elegant would possibly be to project the bounding box into camera space and get the values from there, say if a model is too 'deep'. Without scaling the model, moving the camera in the negative view direction would have the same effect. – pailhead May 28 '14 at 07:54
  • Thanks, gaitat. Once you have the bounding box vertices, the problem reduces to fitting a cube in view of the camera. The "heuristic to scale it" is outlined in the accepted answer of: [Adjusting camera for visible Three.js shape](http://stackoverflow.com/questions/11274358/adjusting-camera-for-visible-three-js-shape) – tranceGuy May 29 '14 at 20:06