Threejs - vertices bounding box

by black strings

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bundles/rxjs.umd.min.js"></script>

CSS

/* fix mouse click offset errors when doing drags */
body {
  margin: 0;
}

JavaScript

var scene, renderer, camera;
var controls;

var onThrottleUpdateBoundaryBox$;
var _onThrottleUpdateBoundaryBox;

var onDebounceUpdateBoundaryBox$;
var _onDebounceUpdateBoundaryBox;

var onAuditUpdateBoundaryBox$;
var _onAuditUpdateBoundaryBox;

var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersect;
var dragging = false;
var offset = new THREE.Vector3();

var pointIntersect = new THREE.Vector3();

var planes = [];
var planePoints = new Map();

var boundaryBox;

init();
lightSetup();
animate();

function init() {
 _onThrottleUpdateBoundaryBox = new rxjs.Subject();
  onThrottleUpdateBoundaryBox$ = _onThrottleUpdateBoundaryBox.asObservable();
  
  _onDebounceUpdateBoundaryBox = new rxjs.Subject();
onDebounceUpdateBoundaryBox$ = _onDebounceUpdateBoundaryBox.asObservable();

_onAuditUpdateBoundaryBox = new rxjs.Subject();
onAuditUpdateBoundaryBox$ = _onAuditUpdateBoundaryBox.asObservable();

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  var width = window.innerWidth;
  var height = window.innerHeight;
  renderer.setSize(width, height);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();
  scene.rotation.x = -Math.PI / 2;

  var gridXZ = new THREE.GridHelper(1000, 100);
  scene.add(gridXZ);
  gridXZ.rotation.x = -Math.PI / 2;


  var axes = new THREE.AxesHelper(1000);
  scene.add(axes);

  camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
  camera.position.y = 160;
  camera.position.z = 400;
  camera.lookAt(new THREE.Vector3(0, 0, 0));

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  window.addEventListener("mousemove", onMouseMove, false);

  window.addEventListener("mousedown", onMouseDown, false);

  window.addEventListener("mouseup", onMouseUp, false);

  createPlanes();

	onThrottleUpdateBoundaryBox$
	    .pipe(rxjs.throttleTime(100))
	    .subscribe((points) => {
	      createBox(points);
	    });
      
      onAuditUpdateBoundaryBox$
     ...