Added TrackballControls to draggable cubes example.

People seem to struggle with this.

examples/webgl_interactive_draggablecubes.html

@@ -22,7 +22,7 @@
 		<script>
 
 			var container, stats;
-			var camera, scene, projector, renderer;
+			var camera, controls, scene, projector, renderer;
 			var objects = [], plane;
 
 			var mouse = new THREE.Vector2(),
@@ -43,6 +43,15 @@
 				camera.position.z = 1000;
 				scene.add( camera );
 
+				controls = new THREE.TrackballControls( camera );
+				controls.rotateSpeed = 1.0;
+				controls.zoomSpeed = 1.2;
+				controls.panSpeed = 0.8;
+				controls.noZoom = false;
+				controls.noPan = false;
+				controls.staticMoving = true;
+				controls.dynamicDampingFactor = 0.3;
+
 				scene.add( new THREE.AmbientLight( 0x505050 ) );
 
 				var light = new THREE.SpotLight( 0xffffff, 1.5 );
@@ -92,7 +101,6 @@
 
 				plane = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.25, transparent: true, wireframe: true } ) );
 				plane.geometry.applyMatrix( new THREE.Matrix4().makeRotationX( Math.PI / 2 ) );
-				plane.lookAt( camera.position );
 				plane.visible = false;
 				scene.add( plane );
 
@@ -162,6 +170,7 @@
 						INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
 
 						plane.position.copy( INTERSECTED.position );
+						plane.lookAt( camera.position );
 
 					}
 
@@ -192,6 +201,8 @@
 
 				if ( intersects.length > 0 ) {
 
+					controls.enabled = false;
+
 					SELECTED = intersects[ 0 ].object;
 
 					var intersects = ray.intersectObject( plane );
@@ -207,6 +218,8 @@
 
 				event.preventDefault();
 
+				controls.enabled = true;
+
 				if ( INTERSECTED ) {
 
 					plane.position.copy( INTERSECTED.position );
@@ -232,6 +245,8 @@
 
 			function render() {
 
+				controls.update();
+
 				renderer.render( scene, camera );
 
 			}