How to get the geometry of a model imported from STL in three.js

Question

I'm using STLLoader to load STL file into three.js and I want to get the vertices (and the geometry) of the model after I call the loader for further usage. How can I do that? My current code is as below but I cannot get the geometry after calling the loader.

 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)

Answer 1

As of three.js R125, the recommended way to do this is with the loadAsync method, which is now native to three.js:

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

That method returns a promise. You couldthen use a 'then' to get the geometry of the STL and create the mesh. You could also use a traditional callback, or an async/await structure, but I think the example below using the native three.js method is the simplest way. The example shows how you can get geometry to a global variable once the promise is resolved and the STL file is loaded:

// 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...
}