UZI demo

Create a box around an object

HTML

<script src="https://unpkg.com/three@0.144.0/build/three.min.js"></script>
<script src="https://unpkg.com/three@0.144.0/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://unpkg.com/three@0.144.0/examples/js/loaders/DRACOLoader.js"></script>
<script src="https://unpkg.com/three@0.144.0/examples/js/controls/OrbitControls.js"></script>
<script src="https://unpkg.com/three@0.144.0/examples/js/math/OBB.js"></script>

CSS

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

JavaScript

var mesh, renderer, scene, camera, controls, model, scale;

init();
animate();

function init() {
		scale = 50;
    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();
    
    // camera
    camera = new THREE.PerspectiveCamera( 100, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( scale, scale, 0 );

    // controls
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    
    // ambient
    scene.add( new THREE.AmbientLight( 0xffffff ) );
    
    // light
    const directionalLight = new THREE.DirectionalLight(0xffffff, 30); 
    directionalLight.position.set(1, 2, 3);
    scene.add(directionalLight)
    
    // axes
    scene.add( new THREE.AxesHelper( 100 ) );

 
    const loader = new THREE.GLTFLoader();
    loader.setCrossOrigin('anonymous');

    const dracoLoader = new THREE.DRACOLoader().setDecoderPath('https://unpkg.com/three@0.132.2/examples/js/libs/draco/gltf/');
    loader.setDRACOLoader(dracoLoader);

    loader.load('https://rawcdn.githack.com/wetzzer/Uzi/e85576bd079c9648e4e2148567ecfa32a5660564/UZI.glb', (gltf) => {
				model = gltf.scene;
        scene.add(model);
        createBoundingBox(scene);
    }); 
}

function createBoundingBox(scene) {
  scene.traverse((child) => {
    if (child instanceof THREE.Object3D && child.name.includes("UZI")) {
      console.log("FOUND UZI")
      
			const aabb = new THREE.Box3().setFromObject(child);
      let wireframe = new THREE.Box3Helper(aabb, 0xfff000); // Choose a color for the bounding box
      //scene.add(wireframe);
      
			//Method 1
      //let size = new THREE.Vector3();
      //let center = new THREE.Vector3();
     
      //center = aabb.getCenter(center);
      //size = aabb.getSize(size).multiplyScalar(0.5);
      //const obb = new THREE.OBB(center, size);
      
      // Method 2
  ...