Threejs - Largest Triangle Squarish2

by black strings

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tinyqueue.min.js"></script>

<!-- test between parallel check using dot product vs vector comparison, both seems about equal, while test1 seems sometimes a split few mili seconds faster -->

CSS

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

JavaScript

class DewFace {
  constructor(tri) {
    this.tri = tri;
    this.area = tri.getArea();
    this.largestAngle = this.findLargestAngle();
  }

  findLargestAngle() {
    let largest;
    const tri = this.tri;
    if (tri) {
      const a = this.findAngle(tri.a, tri.b, tri.c);
      const b = this.findAngle(tri.b, tri.c, tri.a);
      const c = this.findAngle(tri.c, tri.a, tri.b);
      const angles = [a, b, c];
      largest = angles.reduce((p, c) => {
        return p > c ? p : c;
      });
    } else {
      console.error('getAngleAvg error');
    }
    return largest;
  }

  findAngle(a, b, c) {
    const v1 = new THREE.Vector3().subVectors(a, b).normalize();
    const v2 = new THREE.Vector3().subVectors(c, b).normalize();
    const angle = v2.angleTo(v1);
    return THREE.MathUtils.radToDeg(angle);
  }
}

var scene, renderer, camera;
var cube;
var controls;

var umbrellaMesh;

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

function init() {
  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();

  var gridXZ = new THREE.GridHelper(1000, 100);
  scene.add(gridXZ);

  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);


  lightSetup();

  createScene();
}

function createScene() {
  // shape
  const jsonPoints = [
    [-42,93],[-42,-2],[20,-2],[20,41],[91,111],[222,111],[222,37],[176,37],[176,76],[138,76],[138,-23],[246,-23],[246,128],[88,128],[88,218],[-180,218],[-180,93]
  ];
  const shapeGeo = createShapeGeometry(jsonPoints);
  const mat = new THREE.MeshBasicMaterial({
    wireframe: true,
    color: 0xfff0f0
  });
  const mesh = new...