threejs computing Box3 from Mesh

by mmalex

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

CSS

body {
  overflow: hidden;
}

JavaScript

let renderer;
let camera;
let controls;

let scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(54, window.innerWidth / window.innerHeight, 0.1, 1000);

renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(new THREE.Color(0xfefefe));
document.body.appendChild(renderer.domElement);

camera.position.x = 10;
camera.position.y = 5.5;
camera.position.z = 0.5;
camera.lookAt(0, 0, 0);

controls = new THREE.OrbitControls(camera);

// white spotlight shining from the side, casting a shadow
let spotLight = new THREE.SpotLight(0xffffff, 2.5, 25, Math.PI / 6);
spotLight.position.set(9, 10, 1);
scene.add(spotLight);

let gridHelper = new THREE.GridHelper(4, 4);
scene.add(gridHelper);

// example code
const geometry = new THREE.BoxGeometry(4.50, .80, 4.50);
const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
const topBox = new THREE.Mesh(geometry, material);
topBox.rotation.y = 45 * (Math.PI / 180);
topBox.scale.x = 300 / 450;  // some proportional number < 1
topBox.updateMatrix(true);
topBox.updateMatrixWorld(true);
const bound = new THREE.Box3().setFromObject(topBox);

scene.add(topBox);

// Show bounding box
const helper = new THREE.Box3Helper(bound, 0x0000ff);
scene.add(helper);

///// end of example

let animate = function() {
  requestAnimationFrame(animate);
 
  controls.update();
  renderer.render(scene, camera);
};

animate();