如何在three.js中获取从STL导入的模型的几何图形答案

【问题标题】：How to get the geometry of a model imported from STL in three.js如何在three.js中获取从STL导入的模型的几何图形
【发布时间】：2021-02-07 05:18:59
【问题描述】：

我正在使用 STLLoader 将 STL 文件加载到 three.js 中，并且我想在调用加载器后获取模型的顶点（和几何形状）以供进一步使用。我怎样才能做到这一点？我当前的代码如下，但调用加载程序后我无法获取几何图形。

var loader = new THREE.STLLoader();
var myModel = new THREE.Object3D();

loader.load("myModel.stl", function (geometry) {
        var mat = new THREE.MeshLambertMaterial({color: 0x7777ff});
        var geo = new THREE.Geometry().fromBufferGeometry(geometry);
        myModel = new THREE.Mesh(geo, mat);
        scene.add(myModel);
 });

console.log(myModel.geometry.vertices)

【问题讨论】：

在回调函数结束时调用console.log(myModel.geometry.vertices)。加载是异步的，因此您在对象尚未下载时尝试访问属性。
非常感谢，请问有下载模型后访问属性的方法吗？
您可以在回调函数中执行此操作。或者，一般来说，首先加载您需要的所有资源，然后使用它们进行处理。

标签： javascript three.js

【解决方案1】：

从 three.js R125 开始，推荐的方法是使用 loadAsync 方法，该方法现在是 three.js 的原生方法：

https://threejs.org/docs/#api/en/loaders/Loader.loadAsync

该方法返回一个承诺。然后，您可以使用“then”来获取 STL 的几何形状并创建网格。您也可以使用传统的回调，或 async/await 结构，但我认为下面使用本机 three.js 方法的示例是最简单的方法。该示例展示了如何在 promise 被解析并加载 STL 文件后将几何图形获取到全局变量：

// Global variables for bounding boxes
let bbox;

const loader = new STLLoader();
const promise = loader.loadAsync('model1.stl');
promise.then(function ( geometry ) {
  const material = new THREE.MeshPhongMaterial();
  const mesh = new THREE.Mesh( geometry, material );
  mesh.geometry.computeBoundingBox();
  bbox = mesh.geometry.boundingBox;
  scene.add( mesh );
  buildScene();
  console.log('STL file loaded!');
}).catch(failureCallback);

function failureCallback(){
  console.log('Could not load STL file!');
}

function buildScene() {
  console.log('STL file is loaded, so now build the scene');
  // !VA bounding box of the STL mesh accessible now
  console.log(bbox);
  // Build the rest of your scene...
}

【讨论】：