Threejs - Dragging Angled Sides

When the selected object needs to change in size while dragging.

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>
<div id="imgContainer">

</div>

<p> 
  Red is the nested child grabspot. Pink is parent grabspot.
</p>

CSS

p {
  display:none;
}
body {
  margin: 0;
}

JavaScript

/*
  There are a few key points to doing click drag.
  - Camera and canvas dom should sync up size-wise

  // on the first and only mouse down
  // these two variables should stay the same throughout mouse move
  - store mouse click position
  - store the clicked on mesh's Position

  // on every mouse move
  - get the mouse intersection with math XY place facing Z+
  - get the offset diff between mouseDown position and current mouse move intersection
  -

  */


  var scene, renderer, camera, controls;

  class LineProxy {
    constructor(start, end) {
      this.start = start;
      this.end = end;

      var geo = new THREE.Geometry();
      geo.vertices.push(this.start, this.end);
      this.mesh = new THREE.Line(geo, new THREE.LineBasicMaterial({color: 0xff0000}));
      this.mesh.name = 'LineProxy';

    }

    updateEndPoint(newPoint) {
      this.end.copy(newPoint);
      this.mesh.geometry.verticesNeedUpdate = true;
    }

    updateStartPoint(newPoint) {
      this.start.copy(newPoint);
      this.mesh.geometry.verticesNeedUpdate = true;
    }

    show(){
      this.mesh.visible = true;
    }

    hide(){
      this.mesh.visible = false;
    }

  }

  /**
   * A circular drag guide that doesn't change size during a drag.
   * Sits within a Side and serves as a guide for a Side during dragging.
   * @constructor
   */
  class DragGuide {

    constructor() {
      this.clearMaterial = new THREE.MeshBasicMaterial({transparent: true, opacity: 0});
      this.material = new THREE.MeshBasicMaterial({color: 0xff0000});

      var radius = 2;
      var segments = 12;
      var geo = new THREE.CircleGeometry(radius, segments);
      this.mesh = new THREE.Mesh(geo, this.material);
      this.id = this.mesh.id;

      // math plane always represented inworld space
      this.plane = new THREE.Plane();
      //this.planeHelper = new THREE.PlaneHelper(this.plane, 24, 0xffff00);
      //scene.add(this.planeHelper);

      // arrow face
      //arrow helper for...