title: Bounding Box of a stl object in three.js
body: <p>Good day everyone,</p>
  
  <p>I have come across several posts about this topic but no solution would work. I have an object that I load with the help of the STLLoader in three.js for which I would like to get a bounding box.</p>
  
  <pre><code>    // Add stl objects and a name
  function addSTLObject(url, name) {
      var loader = new THREE.STLLoader();
      loader.load(url, function (geometry) {
  
          var material = new THREE.MeshPhongMaterial({ color: 0xff5533 });
          var mesh = new THREE.Mesh(geometry, material);
          // To scale element, use:
          // mesh.scale.set(0.01, 0.01, 0.01);
          // Add a name to the object to find it if it needs to be removed
          mesh.name = name;
          mesh.position.x = 0;
          mesh.position.y = 0;
          mesh.position.z = 0;
  
          scene.add(mesh);
      });
  }
  </code></pre>
  
  <p>and I am loading this object as follows:</p>
  
  <pre><code>addSTLObject('model/cases/iphone5.stl', 'phone-model');
  var phoneModelAdded = scene.getObjectByName('phone-model', true);
  </code></pre>
  
  <p>Now I have tried the solutions provided here: <a href="https://github.com/mrdoob/three.js/issues/3471" rel="nofollow noreferrer">https://github.com/mrdoob/three.js/issues/3471</a> and here <a href="https://stackoverflow.com/questions/15492857/any-way-to-get-a-bounding-box-from-a-three-js-object3d">Any way to get a bounding box from a three.js Object3D?</a></p>
  
  <pre><code>var bbox = new THREE.Box3().setFromObject(phoneModelAdded);
  
  var geometry = phoneModel.children[0].children[0].geometry;
  geometry.computeBoundingBox();
  </code></pre>
  
  <p>While the first solution gives me an error saying "Cannot read property 'updateMatrixWorld' of undefined", the second gives me no error at all but does nothing and if I try accessing the "geometry" property it says that it doesn't exist. </p>
  
  <p>Does someone have a working solution?
  Any help is appreciated.</p>
  
  <p>Have a good day!</p>
  
  <p><strong>EDIT</strong>:</p>
  
  <pre><code>        // Add stl objects and a name
  function addSTLObject(url, name) {
      var bbox;
      var loader = new THREE.STLLoader();
      loader.load(url, function (geometry) {
  
          var material = new THREE.MeshPhongMaterial({ color: 0xff5533 });
          var mesh = new THREE.Mesh(geometry, material);
          // To scale element, use:
          // mesh.scale.set(0.01, 0.01, 0.01);
          // Add a name to the object to find it if it needs to be removed
          mesh.name = name;
          mesh.position.x = 0;
          mesh.position.y = 0;
          mesh.position.z = 0;
  
          bbox = new THREE.Box3().setFromObject(mesh);
  
          scene.add(mesh);
  
          return bbox;
      });
  }
  </code></pre>
  
  <p>and aftwards</p>
  
  <pre><code>var bbox = addSTLObject('model/cases/iphone5.stl', 'phone-model');
      scene.add(bbox);
  </code></pre>
  
  <p>Error: "THREE.Object3D.add: object not an instance of THREE.Object3D"</p>
  
  <p><strong>EDIT 2:</strong></p>
  
  <pre><code>var bbox, bboxComputed = false;
  
      function addSTLObject(url, name) {
      var bbox;
      var loader = new THREE.STLLoader();
      loader.load(url, function (geometry) {
  
          var material = new THREE.MeshPhongMaterial({ color: 0xff5533 });
          var mesh = new THREE.Mesh(geometry, material);
          // To scale element, use:
          // mesh.scale.set(0.01, 0.01, 0.01);
          // Add a name to the object to find it if it needs to be removed
          mesh.name = name;
          mesh.position.x = 0;
          mesh.position.y = 0;
          mesh.position.z = 0;
  
          bbox = new THREE.BoundingBoxHelper(mesh);
          bbox.update();
          bboxComputed = true;
  
          scene.add(mesh);
      });
  
  }
  
  addSTLObject('model/cases/iphone5.stl', 'phone-model');
      var myInterval = setInterval( function(){
          if( bboxComputed ) {
              alert( bbox.box.min, bbox.box.max, bbox.box.size() );
              scene.add(bbox);
              clearInterval( myInterval );
              bboxComputed = false;
          }
      }, 100 );
  </code></pre>
  
  <p>This won't work.</p>
  
  <p><strong>EDIT 3:</strong>
  I was trying to set up a function that would have everything I need and give back an object with all of the calculated information:</p>
  
  <pre><code>    function calculateSTLProperties(url, name) {
      var STLObject, STLbbox, STLComputed = false, STLGeometry;
  
      var loader = new THREE.STLLoader();
      loader.load(url, function (geometry) {
  
          var material = new THREE.MeshPhongMaterial({ color: 0xff5533 });
          var mesh = new THREE.Mesh(geometry, material);
          // To scale element, use:
          // mesh.scale.set(0.01, 0.01, 0.01);
          // Add a name to the object to find it if it needs to be removed
          mesh.name = name;
          mesh.position.x = 0;
          mesh.position.y = 0;
          mesh.position.z = 0;
  
          // Compute a bounding box for the element
          STLbbox = new THREE.BoundingBoxHelper(mesh);
          STLbbox.update();
  
          // Get the geometry of the case
          STLGeometry = geometry;
          STLComputed = true;
      });
  
      // Set an interval to wait for the corresponding bounding box and geometry to be computed
      var myInterval = setInterval( function(){
          if( STLComputed ) {
          STLObject = {
              "geometry" : STLGeometry,
              "bbox" : STLbbox,
              "x" : STLbbox.box.size().x,
              "y" : STLbbox.box.size().y,
              "z" : STLbbox.box.size().z
          };
  
          clearInterval( myInterval );
          bboxComputed = false;
  
          }
      }, 100 );
  
      return STLObject;
  }
  </code></pre>
  
  <p>Unfortunately, somehow the object doesn't get passed through and I end up with an "undefined" in the end when trying to save it:</p>
  
  <pre><code>var STLObjectLoaded = calculateSTLProperties('model/cases/iphone5.stl', 'phone-model');
      console.log(STLObjectLoaded);
  </code></pre>
  
  <p>What am I missing?</p>