Threejs - Click Drag Nested Children

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>

CSS

body {
  margin:0px;
}

JavaScript

"use strict";
 
// in jsfiddle, there is a padding that is forced upon init for the body,
// if you do not set margin to zero on the body, your mouse clicks on shapes will be off. inless you account for the offset.

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});
  g2.add(g2c);
  
  var g2c2 = createGrabSpot('grabSpot');
  g2c2.material = new THREE.MeshBasicMaterial({color:0x00ff00});
  g2c.add(g2c2);
  
}


function init()
{	
    renderer = new THREE.WebGLRenderer( {antialias:true, alpha: true } );
	var width = window.innerWidth - window.pageXOffset;
	var height = window.innerHeight - window.pageYOffset;

    renderer.setSize (width, height);
    renderer.setClearColor(0x000000, 1);   //using clear background color
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    
	document.body.appendChild (renderer.domElement);

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera (60, width/height, 1, 10000);
	camera.position.y = 0;
	camera.position.z = 80;
	//camera.lookAt (new THREE.Vector3(0,0,0));
    
  scene.add( camera );

  controls = new...