Fixed mouse listeners on draggable cubes example, also reverted to previous...

Fixed mouse listeners on draggable cubes example, also reverted to previous aesthetic (sorry @alteredq).

examples/webgl_interactive_draggablecubes.html

@@ -37,20 +37,14 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				var info = document.createElement( 'div' );
-				info.style.position = 'absolute';
-				info.style.top = '10px';
-				info.style.width = '100%';
-				info.style.textAlign = 'center';
-				info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> webgl - draggable cubes';
-				container.appendChild( info );
-
-				camera = new THREE.Camera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
+				camera = new THREE.Camera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 1000;
 
 				scene = new THREE.Scene();
 
-				var light = new THREE.SpotLight( 0xffffff, 2 );
+				scene.addLight( new THREE.AmbientLight( 0x505050 ) );
+
+				var light = new THREE.SpotLight( 0xffffff, 1.5 );
 				light.position.set( 0, 500, 2000 );
 				light.castShadow = true;
 				scene.addLight( light );
@@ -77,38 +71,47 @@
 
 				}
 
-				plane = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.5, wireframe: true } ) );
+				plane = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.25, transparent: true, wireframe: true } ) );
+				plane.lookAt( camera.position );
 				plane.visible = false;
 				scene.addObject( plane );
 
 				projector = new THREE.Projector();
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias : true } );
 				renderer.sortObjects = false;
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				renderer.shadowMapEnabled = true;
+				renderer.shadowMapSoft = true;
+
 				renderer.shadowCameraNear = 3;
 				renderer.shadowCameraFar = camera.far;
-				renderer.shadowCameraFov = 30;
+				renderer.shadowCameraFov = 50;
 
-				renderer.shadowMapBias = 0.00389;
+				renderer.shadowMapBias = 0.0039;
 				renderer.shadowMapDarkness = 0.5;
 				renderer.shadowMapWidth = 1024;
 				renderer.shadowMapHeight = 1024;
 
-				renderer.shadowMapEnabled = true;
-				renderer.shadowMapSoft = true;
+				container.appendChild( renderer.domElement );
 
-				container.appendChild(renderer.domElement);
+				var info = document.createElement( 'div' );
+				info.style.position = 'absolute';
+				info.style.top = '10px';
+				info.style.width = '100%';
+				info.style.textAlign = 'center';
+				info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> webgl - draggable cubes';
+				container.appendChild( info );
 
 				stats = new Stats();
 				stats.domElement.style.position = 'absolute';
 				stats.domElement.style.top = '0px';
 				container.appendChild( stats.domElement );
 
-				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
-				document.addEventListener( 'mousedown', onDocumentMouseDown, false );
-				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
+				renderer.domElement.addEventListener( 'mousemove', onDocumentMouseMove, false );
+				renderer.domElement.addEventListener( 'mousedown', onDocumentMouseDown, false );
+				renderer.domElement.addEventListener( 'mouseup', onDocumentMouseUp, false );
 
 			}
 
@@ -186,6 +189,7 @@
 					container.style.cursor = 'move';
 
 				}
+
 			}
 
 			function onDocumentMouseUp( event ) {