Editor: Object can now change parents.

editor/js/ui/Sidebar.Object3D.js

@@ -1,27 +1,23 @@
 Sidebar.Object3D = function ( signals ) {
 
-	var objects = {
-
-		'PerspectiveCamera': THREE.PerspectiveCamera,
-		'AmbientLight': THREE.AmbientLight,
-		'DirectionalLight': THREE.DirectionalLight,
-		'HemisphereLight': THREE.HemisphereLight,
-		'PointLight': THREE.PointLight,
-		'SpotLight': THREE.SpotLight,
-		'Mesh': THREE.Mesh,
-		'Object3D': THREE.Object3D
-
-	};
-
 	var container = new UI.Panel();
 	container.setBorderTop( '1px solid #ccc' );
-	container.setDisplay( 'none' );
 	container.setPadding( '10px' );
 
 	var objectType = new UI.Text().setColor( '#666' ).setTextTransform( 'uppercase' );
 	container.add( objectType );
 	container.add( new UI.Break(), new UI.Break() );
 
+	// parent
+
+	var objectParentRow = new UI.Panel();
+	var objectParent = new UI.Select().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
+
+	objectParentRow.add( new UI.Text( 'Parent' ).setWidth( '90px' ).setColor( '#666' ) );
+	objectParentRow.add( objectParent );
+
+	container.add( objectParentRow );
+
 	// name
 
 	var objectNameRow = new UI.Panel();
@@ -201,6 +197,8 @@ Sidebar.Object3D = function ( signals ) {
 
 	var selected = null;
 
+	var scene = null;
+
 	var uniformScale = 1;
 
 	var scaleRatioX = 1;
@@ -250,6 +248,26 @@ Sidebar.Object3D = function ( signals ) {
 
 			selected.name = objectName.getValue();
 
+			if ( selected.parent !== undefined ) {
+
+				var newParentId = parseInt( objectParent.getValue() );
+
+				if ( selected.parent.id !== newParentId && selected.id !== newParentId ) {
+
+					var parent = scene.getObjectById( newParentId );
+
+					if ( parent === undefined ) {
+
+						parent = scene;
+
+					}
+
+					parent.add( selected );
+
+				}
+
+			}
+
 			selected.position.x = objectPositionX.getValue();
 			selected.position.y = objectPositionY.getValue();
 			selected.position.z = objectPositionZ.getValue();
@@ -345,6 +363,7 @@ Sidebar.Object3D = function ( signals ) {
 	function updateRows() {
 
 		var properties = {
+			'parent': objectParentRow,
 			'fov': objectFovRow,
 			'near': objectNearRow,
 			'far': objectFarRow,
@@ -382,6 +401,20 @@ Sidebar.Object3D = function ( signals ) {
 
 	function getObjectInstanceName( object ) {
 
+		var objects = {
+
+			'Scene': THREE.Scene,
+			'PerspectiveCamera': THREE.PerspectiveCamera,
+			'AmbientLight': THREE.AmbientLight,
+			'DirectionalLight': THREE.DirectionalLight,
+			'HemisphereLight': THREE.HemisphereLight,
+			'PointLight': THREE.PointLight,
+			'SpotLight': THREE.SpotLight,
+			'Mesh': THREE.Mesh,
+			'Object3D': THREE.Object3D
+
+		};
+
 		for ( var key in objects ) {
 
 			if ( object instanceof objects[ key ] ) return key;
@@ -392,137 +425,48 @@ Sidebar.Object3D = function ( signals ) {
 
 	// events
 
-	signals.objectSelected.add( function ( object ) {
-
-		selected = object;
-
-		if ( object ) {
-
-			container.setDisplay( 'block' );
-
-			objectType.setValue( getObjectInstanceName( object ) );
-
-			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 );
-
-			}
-
-			if ( object.intensity !== undefined ) {
-
-				objectIntensity.setValue( object.intensity );
-
-			}
-
-			if ( object.color !== undefined ) {
-
-				objectColor.setValue( '#' + object.color.getHexString() );
-
-			}
-
-			if ( object.groundColor !== undefined ) {
-
-				objectGroundColor.setValue( '#' + object.groundColor.getHexString() );
-
-			}
-
-			if ( object.distance !== undefined ) {
-
-				objectDistance.setValue( object.distance );
-
-			}
-
-			if ( object.angle !== undefined ) {
-
-				objectAngle.setValue( object.angle );
-
-			}
+	signals.sceneChanged.add( function ( object ) {
 
-			if ( object.exponent !== undefined ) {
+		scene = object;
 
-				objectExponent.setValue( object.exponent );
+		var options = {};
 
-			}
+		options[ scene.id ] = 'Scene';
 
-			objectVisible.setValue( object.visible );
+		( function addObjects( objects ) {
 
-			try {
+			for ( var i = 0, l = objects.length; i < l; i ++ ) {
 
-				objectUserData.setValue( JSON.stringify( object.userData, null, '  ' ) );
+				var object = objects[ i ];
 
-			} catch ( error ) {
+				options[ object.id ] = object.name;
 
-				console.log( error );
+				addObjects( object.children );
 
 			}
 
-			objectUserData.setBorderColor( '#ccc' );
-			objectUserData.setBackgroundColor( '' );
-
-			updateRows();
-			updateTransformRows();
+		} )( object.children );
 
-		} else {
-
-			container.setDisplay( 'none' );
-
-		}
+		objectParent.setOptions( options );
 
 	} );
 
+	signals.objectSelected.add( updateUI );
+	signals.objectChanged.add( updateUI );
+	signals.cameraChanged.add( updateUI );
 
-	signals.cameraChanged.add( function ( camera ) {
-
-		if ( camera && camera === selected ) {
-
-			refreshObjectUI( camera );
-
-		}
+	function updateUI( object ) {
 
-	} );
+		selected = object
 
-	signals.objectChanged.add( function ( object ) {
+		objectType.setValue( getObjectInstanceName( object ) );
 
-		if ( object ) {
+		if ( object.parent !== undefined ) {
 
-			refreshObjectUI( object );
+			objectParent.setValue( object.parent.id );
 
 		}
 
-	} );
-
-	function refreshObjectUI( object ) {
-
-		container.setDisplay( 'block' );
-
-		objectType.setValue( getObjectInstanceName( object ).toUpperCase() );
-
 		objectName.setValue( object.name );
 
 		objectPositionX.setValue( object.position.x );
@@ -593,6 +537,22 @@ Sidebar.Object3D = function ( signals ) {
 
 		objectVisible.setValue( object.visible );
 
+		try {
+
+			objectUserData.setValue( JSON.stringify( object.userData, null, '  ' ) );
+
+		} catch ( error ) {
+
+			console.log( error );
+
+		}
+
+		objectUserData.setBorderColor( '#ccc' );
+		objectUserData.setBackgroundColor( '' );
+
+		updateRows();
+		updateTransformRows();
+
 	}
 
 	return container;

editor/js/ui/Sidebar.Scene.js

@@ -135,10 +135,8 @@ Sidebar.Scene = function ( signals ) {
 		var type = fogType.getValue();
 
 		fogColorRow.setDisplay( type === 'None' ? 'none' : '' );
-
 		fogNearRow.setDisplay( type === 'Fog' ? '' : 'none' );
 		fogFarRow.setDisplay( type === 'Fog' ? '' : 'none' );
-
 		fogDensityRow.setDisplay( type === 'FogExp2' ? '' : 'none' );
 
 	}
@@ -163,19 +161,19 @@ Sidebar.Scene = function ( signals ) {
 
 		var options = {};
 
-		( function createList( object, pad ) {
+		( function addObjects( objects, pad ) {
 
-			for ( var key in object.children ) {
+			for ( var i = 0, l = objects.length; i < l; i ++ ) {
 
-				var child = object.children[ key ];
+				var object = objects[ i ];
 
-				options[ child.id ] = pad + child.name + ' <span style="color: #aaa">- ' + getObjectType( child ) + '</span>';
+				options[ object.id ] = pad + object.name + ' <span style="color: #aaa">- ' + getObjectType( object ) + '</span>';
 
-				createList( child, pad + '&nbsp;&nbsp;&nbsp;' );
+				addObjects( object.children, pad + '&nbsp;&nbsp;&nbsp;' );
 
 			}
 
-		} )( scene, '' );
+		} )( scene.children, '' );
 
 		outliner.setOptions( options );