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

Auto-scale when rendering an .stl file with three.js

本文关键字：缩放 文件 stl three js 渲染 使用      更新时间：2023-09-26

我正在尝试创建一个服务器/网页，工作原理如下:

  1. 客户端上传他们想要3d打印的。stl文件
  2. 服务器在.stl文件上运行网格修复脚本
  3. 新修复的。stl文件在客户端浏览器中呈现，以便他们可以确认脚本没有以不良方式更改。stl文件

我遇到的问题是步骤3。我试图使用这个例子从3 .js的repo渲染。stl文件:

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

问题是，如果.stl文件中的模型太大，你无法看到整个东西。我可以通过在mesh.scale中使用三个参数来修复这个问题，这样整个模型就可以在相机的视野中了。在代码块中设置(x, y, z)函数:

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' );

但是，我想知道如何在。stl文件中自动识别模型的大小，并相应地缩放它。

我知道这是可能的，因为GitHub已经用他们的STL文件查看器实现了这一点。您可以通过导航到这里并单击其中一个.stl文件来查看它是如何工作的:

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

基本上GitHub STL文件查看器正是我想要模拟的，因为它干净地加载任何. STL文件，而不需要用户放大/缩小以正确查看模型。

在你的视口中有多少模型是可见的取决于你的相机参数和你如何设置你的场景。您可以使用几何的。boundingbox或。boundingsphere来计算模型的大小，然后使用一些启发式方法来适当地缩小或扩大模型以达到您想要的效果。还有一个BoundingBoxHelper，可以帮助您可视化模型的扩展。

另外你可以看:如何适合相机对象和调整镜头使Three.js形状可见

相关文章：