Threejs - Click Drag Nested Children Side

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

"use strict";
  
/*
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;

init();
animate();

function runPlayground(){
	/*
	// Set 1 test
  //--------------------------------------
  // when parent is dead center and no rotation or position applied
  // parent grabspot
	var g1 = createGrabSpot('grabSpot');
  //g1.rotateZ(THREE.Math.degToRad(45));
	//g1.applyMatrix(new THREE.Matrix4().identity());
  
  // child grabspot
  var g1c = createGrabSpot('grabSpot');
  // change color of child to red for sake of easier identification
  g1c.material = new THREE.MeshBasicMaterial({color:0xff0000});
  // add child grabspot into parent grabspot
  g1.add(g1c);
  
  // Set 2 test
  //--------------------------------------
  // when parent is not center and rotation is applied to parent
  var g2 = createGrabSpot('grabSpot');
  g2.rotateZ(THREE.Math.degToRad(45));
  g2.position.y += 24;
  
  var g2c = createGrabSpot('grabSpot');
  g2c.material = new THREE.MeshBasicMaterial({color:0xff0000});
  g2c.rotateZ(THREE.Math.degToRad(45));
  g2.add(g2c);
  */
  
  var points = [
  	new THREE.Vector3(0,0,0),
    new THREE.Vector3(0,30,0),
    new THREE.Vector3(30,30,0),
    new THREE.Vector3(30,0,0)
  ]
  var level = createShapeWithSides(points);
  scene.add(level);
  
  var points = [
  	new THREE.Vector3(0,0,0),
    new THREE.Vector3(0,24,0),
    new THREE.Vector3(8,24,0),
    new THREE.Vector3(8,0,0)
  ]
  var stair = createShapeWithSides(points);
  level.children[0].add(stair);
  
  var points = [
  	new THREE.Vector3(0,0,0),
    new THREE.Vector3(0,24,0),
    new...