three.js - linear dimension

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="//cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script src="https://threejs.org/examples/js/renderers/Projector.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.rawgit.com/nmalex/libRAYYS/49b1d763cf678be2bcb7623c3b70daaecd424b67/RayysFacingCamera.js"></script>
Rotate the camera and see how dimension adjusts.

CSS

body {
  font-family: monospace;
  font-size: 11px;
  overflow: hidden;
}

.dim {
  position: absolute;
  left: 0;
  top: 0;
  font-family: monospace;
  font-size: 12px;
  width: 40px;
  height: 16px;
  text-align: center;
  border: none;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
  padding: 1px 2px;
}

JavaScript

var debugp;

var makePoint = function(p) {
  //This will add a starfield to the background of a scene
  var geometry = new THREE.Geometry();

  geometry.vertices.push(p);
  geometry.boundingSphere = new THREE.Sphere(p, 1e-3);

  var material = new THREE.PointsMaterial({
    color: 0xff0000
  });

  return new THREE.Points(geometry, material);
};

class RayysLinearDimension {

  constructor(domRoot, renderer, camera, raycaster) {
    this.domRoot = domRoot;
    this.renderer = renderer;
    this.camera = camera;
    this.raycaster = raycaster;

    this.cb = {
      onChange: []
    };
    this.config = {
      headLength: 0.5,
      headWidth: 0.35,
      units: "mm",
      unitsConverter: function(v) {
        return v;
      }
    };
  }

  create(p0, p1, extrude) {

    this.from = p0;
    this.to = p1;
    this.extrude = extrude;

    this.node = new THREE.Object3D();
    this.hidden = undefined;

    let el = document.createElement("div");
    el.id = this.node.id;
    el.classList.add("dim");
    el.style.left = "100px";
    el.style.top = "100px";
    el.innerHTML = "";
    this.domRoot.appendChild(el);
    this.domElement = el;

    return this.node;
  }

  update(scene, camera) {
    this.camera = camera;
    //console.log(this.camera);

    // re-create arrow
    this.node.children.length = 0;

    let p0 = this.from;
    let p1 = this.to;
    let extrude = this.extrude;

    var pmin, pmax;
    if (extrude.x >= 0 && extrude.y >= 0 && extrude.z >= 0) {
      pmax = new THREE.Vector3(
        extrude.x + Math.max(p0.x, p1.x),
        extrude.y + Math.max(p0.y, p1.y),
        extrude.z + Math.max(p0.z, p1.z));

      pmin = new THREE.Vector3(
        extrude.x < 1e-16 ? extrude.x + Math.min(p0.x, p1.x) : pmax.x,
        extrude.y < 1e-16 ? extrude.y + Math.min(p0.y, p1.y) : pmax.y,
        extrude.z < 1e-16 ? extrude.z + Math.min(p0.z, p1.z) : pmax.z);
    } else if (extrude.x <= 0 && extrude.y <= 0 && extrude.z <= 0) {
      pmax = new THREE.Vector3(
   ...