three.js ~ example ~ Mr.doob

2012-01-05 ~

HTML

<div id="button-bar">
  <button onclick="centerOnSelection()">CenterOnSelection</button>
</div>

CSS

#button-bar {
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  pointer-events: none;
}

#button-bar button {
  pointer-events: initial;
}

JavaScript

import * as THREE from 'https://cdn.skypack.dev/three@0.130.1';
import {
  OrbitControls
} from 'https://cdn.skypack.dev/three@0.130.1/examples/jsm/controls/OrbitControls.js';

/* Implementation taken from https://github.com/mrdoob/three.js/pull/14526 directly. See actual code below. */
const CameraViewBox = function CameraViewBox() {
  /**
   * Camera basis
   *   - x: horizontal pointing to right
   *   - y: vertical pointing to top
   *   - z: normal to camera plane pointing backward
   */
  this.viewBasis = {
    x: new THREE.Vector3(),
    y: new THREE.Vector3(),
    z: new THREE.Vector3(),
  };

  /**
   * Coefficient to scale the view box
   */
  this.fitRatio = 1;

  /**
   * Tangent of the camera vertical field of view angle
   */
  this.verticalTanFov = 0;
  /**
   * Tangent of the camera horizontal field of view angle
   */
  this.horizontalTanFov = 0;

  /**
   * Directional vectors that defines the view projection
   *    - top:
   *      - Colinear to the top plane camera viewing frustrum
   *      - Colinear to the plane defined by the normal viewBasis.x
   *      - Inverse way to viewBasis.z (viewBasis.z.dot(top) < 0)
   *    - bottom:
   *      - Colinear to the bottom plane camera viewing frustrum
   *      - Colinear to the plane defined by the normal viewBasis.x
   *      - Inverse way to viewBasis.z (viewBasis.z.dot(bottom) < 0)
   *    - left:
   *      - Colinear to the left plane camera viewing frustrum
   *      - Colinear to the plane defined by the normal viewBasis.y
   *      - Inverse way to viewBasis.z (viewBasis.z.dot(left) < 0)
   *    - right:
   *      - Colinear to the right plane camera viewing frustrum
   *      - Colinear to the plane defined by the normal viewBasis.y
   *      - Inverse way to viewBasis.z (viewBasis.z.dot(right) < 0)
   */
  this.viewProjection = {
    top: new THREE.Vector3(),
    left: new THREE.Vector3(),
    bottom: new THREE.Vector3(),
    right: new THREE.Vector3(),
  };

  this.bounds = {
    isEmpty:...