Editor: Made objects draggable

editor/js/ui/Sidebar.Properties.Object3D.js

@@ -297,6 +297,53 @@ Sidebar.Properties.Object3D = function ( signals ) {
 
 	} );
 
+
+	signals.objectChanged.add( function ( object ) {
+
+		if ( object ) {
+
+			container.setDisplay( 'block' );
+
+			objectType.setValue( getObjectInstanceName( object ).toUpperCase() );
+
+			objectName.setValue( object.name );
+
+			objectPositionX.setValue( object.position.x );
+			objectPositionY.setValue( object.position.y );
+			objectPositionZ.setValue( object.position.z );
+
+			objectRotationX.setValue( object.rotation.x );
+			objectRotationY.setValue( object.rotation.y );
+			objectRotationZ.setValue( object.rotation.z );
+
+			objectScaleX.setValue( object.scale.x );
+			objectScaleY.setValue( object.scale.y );
+			objectScaleZ.setValue( object.scale.z );
+
+			if ( object.fov !== undefined ) {
+
+				objectFov.setValue( object.fov );
+
+			}
+
+			if ( object.near !== undefined ) {
+
+				objectNear.setValue( object.near );
+
+			}
+
+			if ( object.far !== undefined ) {
+
+				objectFar.setValue( object.far );
+
+			}
+
+			objectVisible.setValue( object.visible );
+
+		}
+
+	} );
+
 	return container;
 
 }

editor/js/ui/Viewport.js

@@ -74,28 +74,96 @@ var Viewport = function ( signals ) {
 
 	// object picking
 
+	var intersectionPlane = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000, 8, 8 ) );
+	intersectionPlane.visible = false;
+	sceneHelpers.add( intersectionPlane );
+	
+	var ray = new THREE.Ray();
 	var projector = new THREE.Projector();
-
-	var distance = 0;
+	var offset = new THREE.Vector3();
+	var picked = null;
 
 	container.dom.addEventListener( 'mousedown', function ( event ) {
 
 		event.preventDefault();
 
-		distance = 0;
+		var vector = new THREE.Vector3(
+			( ( event.clientX - container.dom.offsetLeft ) / container.dom.offsetWidth ) * 2 - 1,
+			- ( ( event.clientY - container.dom.offsetTop ) / container.dom.offsetHeight ) * 2 + 1,
+			0.5
+		);
+		
+		projector.unprojectVector( vector, camera );
+
+		ray.set( camera.position, vector.subSelf( camera.position ).normalize() );
+
+		var intersects = ray.intersectObjects( objects, true );
+
+		if ( intersects.length > 0 ) {
+
+			controls.enabled = false;
+
+			picked = intersects[ 0 ].object;
+
+			signals.objectSelected.dispatch( picked );
+
+			var intersects = ray.intersectObject( intersectionPlane );
+			offset.copy( intersects[ 0 ].point ).subSelf( intersectionPlane.position );
+
+		} else {
+			
+			controls.enabled = true;
+			
+		}
 
 	}, false );
 
 	container.dom.addEventListener( 'mousemove', function ( event ) {
 
-		distance += event.movementX || event.webkitMovementX || event.mozMovementX || 0;
-		distance += event.movementY || event.webkitMovementY || event.mozMovementY || 0;
+		var vector = new THREE.Vector3(
+			( ( event.clientX - container.dom.offsetLeft ) / container.dom.offsetWidth ) * 2 - 1,
+			- ( ( event.clientY - container.dom.offsetTop ) / container.dom.offsetHeight ) * 2 + 1,
+			0.5
+		);
+
+		projector.unprojectVector( vector, camera );
+
+		ray.set( camera.position, vector.subSelf( camera.position ).normalize() );
+		
+		if ( picked ) {
+
+			var intersects = ray.intersectObject( intersectionPlane );
+			
+			if ( intersects.length > 0 ) {
+			
+				picked.position.copy( intersects[ 0 ].point.subSelf( offset ) );
+				
+				signals.objectChanged.dispatch( picked );
+
+				render();
+
+			}
+			
+			return;
+
+		}
+		
+		var intersects = ray.intersectObjects( objects, true );
+
+		if ( intersects.length > 0 ) {
+
+			intersectionPlane.position.copy( intersects[ 0 ].object.position );
+			intersectionPlane.lookAt( camera.position );
+
+		}
 
 	}, false );
 
 	container.dom.addEventListener( 'mouseup', function ( event ) {
 
-		if ( Math.abs( distance ) > 1 ) return;
+		picked = false;
+		
+		controls.enabled = true;
 
 		var vector = new THREE.Vector3(
 			( ( event.clientX - container.dom.offsetLeft ) / container.dom.offsetWidth ) * 2 - 1,
@@ -105,10 +173,10 @@ var Viewport = function ( signals ) {
 
 		projector.unprojectVector( vector, camera );
 
-		var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
+		ray.set( camera.position, vector.subSelf( camera.position ).normalize() );
 		var intersects = ray.intersectObjects( objects, true );
 
-		if ( intersects.length ) {
+		if ( intersects.length > 0 ) {
 
 			signals.objectSelected.dispatch( intersects[ 0 ].object );