get bounding box of a imported model

by jscastro76

HTML

<script src="https://threejs.org/build/three.js"></script>
	<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
	<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
  
  
  <canvas id="myCanvas"/>

CSS

body {
			background-color: #fff;
			margin: 0px;
			overflow: hidden;
		}

JavaScript

var mesh, renderer,
		  scene, model,
		  controls,
		  camera,
		  container = document.getElementById('myCanvas');

		//RENDERER
		renderer = new THREE.WebGLRenderer({
		  canvas: container,
		  antialias: true
		});
		//renderer.setClearColor(0x000000);
		renderer.setPixelRatio(window.devicePixelRatio); //device pixel ratio
		renderer.setSize(window.innerWidth, window.innerHeight); //canvas size

		init();

		function init() {


		  scene = new THREE.Scene();
		  scene.background = new THREE.Color(0x999999);
		  var light = new THREE.AmbientLight(0xffffff, 1);

		  light.position.set(0.5, 1.0, 0.5).normalize();
		  scene.add(light);
		  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
		  camera.position.fromArray([-20, 10, -140]);
		  scene.add(camera);

		  controls = new THREE.OrbitControls(camera, container);
		  var loader = new THREE.GLTFLoader();
		  loader.load(
		    'https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf',
		    function(gltf) {
		      model = gltf.scene;
		      this.scene.add(model);
		      let bbox = new THREE.Box3().setFromObject(model);
		      let helper = new THREE.Box3Helper(bbox, new THREE.Color(0, 255, 0));
          let size = bbox.getSize(new THREE.Vector3());
		      scene.add(helper);
		    }
		  );

		  var gridHelper = new THREE.GridHelper(400, 40, 0x0000ff, 0x808080);
		  gridHelper.position.y = 0;
		  gridHelper.position.x = 0;
		  scene.add(gridHelper);
		  render();
		}


		function render() {
		  requestAnimationFrame(render);

		  renderer.render(scene, camera);
		}