使用three.js渲染.stl文件时自动缩放

Question

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.

Answer 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