Merge pull request #10240 from Akiyah/use_DragControls_for_webgl_interactive_draggablecubes

Use DragControls for example/webgl_interactive_draggablecubes.html

examples/webgl_interactive_draggablecubes.html

@@ -19,6 +19,8 @@
 
 		<script src="js/controls/TrackballControls.js"></script>
 
+		<script src="js/controls/DragControls.js"></script>
+
 		<script src="js/libs/stats.min.js"></script>
 
 		<script>
@@ -26,12 +28,6 @@
 			var container, stats;
 			var camera, controls, scene, renderer;
 			var objects = [];
-			var plane = new THREE.Plane();
-			var raycaster = new THREE.Raycaster();
-			var mouse = new THREE.Vector2(),
-			offset = new THREE.Vector3(),
-			intersection = new THREE.Vector3(),
-			INTERSECTED, SELECTED;
 
 			init();
 			animate();
@@ -107,6 +103,11 @@
 
 				container.appendChild( renderer.domElement );
 
+				var dragControls = new THREE.DragControls(camera, objects, renderer.domElement);
+				dragControls.enabled = true;
+				dragControls.on('dragstart', function(e) { controls.enabled = false;  });
+				dragControls.on('dragend',   function(e) { controls.enabled = true;  });
+
 				var info = document.createElement( 'div' );
 				info.style.position = 'absolute';
 				info.style.top = '10px';
@@ -118,10 +119,6 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				renderer.domElement.addEventListener( 'mousemove', onDocumentMouseMove, false );
-				renderer.domElement.addEventListener( 'mousedown', onDocumentMouseDown, false );
-				renderer.domElement.addEventListener( 'mouseup', onDocumentMouseUp, false );
-
 				//
 
 				window.addEventListener( 'resize', onWindowResize, false );
@@ -137,100 +134,6 @@
 
 			}
 
-			function onDocumentMouseMove( event ) {
-
-				event.preventDefault();
-
-				mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
-				mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
-
-				raycaster.setFromCamera( mouse, camera );
-
-				if ( SELECTED ) {
-
-					if ( raycaster.ray.intersectPlane( plane, intersection ) ) {
-
-						SELECTED.position.copy( intersection.sub( offset ) );
-
-					}
-
-					return;
-
-				}
-
-				var intersects = raycaster.intersectObjects( objects );
-
-				if ( intersects.length > 0 ) {
-
-					if ( INTERSECTED != intersects[ 0 ].object ) {
-
-						if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
-
-						INTERSECTED = intersects[ 0 ].object;
-						INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
-
-						plane.setFromNormalAndCoplanarPoint(
-							camera.getWorldDirection( plane.normal ),
-							INTERSECTED.position );
-
-					}
-
-					container.style.cursor = 'pointer';
-
-				} else {
-
-					if ( INTERSECTED ) INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
-
-					INTERSECTED = null;
-
-					container.style.cursor = 'auto';
-
-				}
-
-			}
-
-			function onDocumentMouseDown( event ) {
-
-				event.preventDefault();
-
-				raycaster.setFromCamera( mouse, camera );
-
-				var intersects = raycaster.intersectObjects( objects );
-
-				if ( intersects.length > 0 ) {
-
-					controls.enabled = false;
-
-					SELECTED = intersects[ 0 ].object;
-
-					if ( raycaster.ray.intersectPlane( plane, intersection ) ) {
-
-						offset.copy( intersection ).sub( SELECTED.position );
-
-					}
-
-					container.style.cursor = 'move';
-
-				}
-
-			}
-
-			function onDocumentMouseUp( event ) {
-
-				event.preventDefault();
-
-				controls.enabled = true;
-
-				if ( INTERSECTED ) {
-
-					SELECTED = null;
-
-				}
-
-				container.style.cursor = 'auto';
-
-			}
-
 			//
 
 			function animate() {