Editor improvements and fixes to examples.

editor/js/Sidebar.Geometry.js

@@ -34,6 +34,23 @@ Sidebar.Geometry = function ( editor ) {
 	container.add( objectType );
 	container.add( new UI.Break(), new UI.Break() );
 
+	// uuid
+
+	var geometryUUIDRow = new UI.Panel();
+	var geometryUUID = new UI.Input().setWidth( '115px' ).setColor( '#444' ).setFontSize( '12px' ).setDisabled( true );
+	var geometryUUIDRenew = new UI.Button( '⟳' ).setMarginLeft( '7px' ).onClick( function () {
+
+		geometryUUID.setValue( THREE.Math.generateUUID() );
+		update();
+
+	} );
+
+	geometryUUIDRow.add( new UI.Text( 'UUID' ).setWidth( '90px' ).setColor( '#666' ) );
+	geometryUUIDRow.add( geometryUUID );
+	geometryUUIDRow.add( geometryUUIDRenew );
+
+	container.add( geometryUUIDRow );
+
 	// name
 
 	var geometryNameRow = new UI.Panel();
@@ -71,29 +88,28 @@ Sidebar.Geometry = function ( editor ) {
 
 	//
 
-	var selected = null;
-
 	function update() {
 
-		if ( selected ) {
-
-			selected.name = geometryName.getValue();
+		var geometry = editor.selected.geometry;
 
-		}
+		geometry.uuid = geometryUUID.getValue();
+		geometry.name = geometryName.getValue();
 
 	}
 
-	function build( object ) {
+	function build() {
+
+		var object = editor.selected;
 
 		if ( object && object.geometry ) {
 
-			selected = object.geometry;
+			var geometry = object.geometry;
 
 			container.setDisplay( 'block' );
 
 			objectType.setValue( getGeometryInstanceName( object.geometry ) );
 
-			updateFields( selected );
+			updateFields( geometry );
 
 			//
 
@@ -104,37 +120,37 @@ Sidebar.Geometry = function ( editor ) {
 
 			}
 
-			if ( selected instanceof THREE.PlaneGeometry ) {
+			if ( geometry instanceof THREE.PlaneGeometry ) {
 
 				parameters = new Sidebar.Geometry.PlaneGeometry( signals, object );
 				container.add( parameters );
 
-			} else if ( selected instanceof THREE.CubeGeometry ) {
+			} else if ( geometry instanceof THREE.CubeGeometry ) {
 
 				parameters = new Sidebar.Geometry.CubeGeometry( signals, object );
 				container.add( parameters );
 
-			} else if ( selected instanceof THREE.CylinderGeometry ) {
+			} else if ( geometry instanceof THREE.CylinderGeometry ) {
 
 				parameters = new Sidebar.Geometry.CylinderGeometry( signals, object );
 				container.add( parameters );
 
-			} else if ( selected instanceof THREE.SphereGeometry ) {
+			} else if ( geometry instanceof THREE.SphereGeometry ) {
 
 				parameters = new Sidebar.Geometry.SphereGeometry( signals, object );
 				container.add( parameters );
 
-			} else if ( selected instanceof THREE.IcosahedronGeometry ) {
+			} else if ( geometry instanceof THREE.IcosahedronGeometry ) {
 
 				parameters = new Sidebar.Geometry.IcosahedronGeometry( signals, object );
 				container.add( parameters );
 
-			} else if ( selected instanceof THREE.TorusGeometry ) {
+			} else if ( geometry instanceof THREE.TorusGeometry ) {
 
 				parameters = new Sidebar.Geometry.TorusGeometry( signals, object );
 				container.add( parameters );
 
-			} else if ( selected instanceof THREE.TorusKnotGeometry ) {
+			} else if ( geometry instanceof THREE.TorusKnotGeometry ) {
 
 				parameters = new Sidebar.Geometry.TorusKnotGeometry( signals, object );
 				container.add( parameters );
@@ -143,8 +159,6 @@ Sidebar.Geometry = function ( editor ) {
 
 		} else {
 
-			selected = null;
-
 			container.setDisplay( 'none' );
 
 		}
@@ -158,6 +172,7 @@ Sidebar.Geometry = function ( editor ) {
 
 	function updateFields( geometry ) {
 
+		geometryUUID.setValue( geometry.uuid );
 		geometryName.setValue( geometry.name );
 		geometryVertices.setValue( geometry.vertices.length );
 		geometryFaces.setValue( geometry.faces.length );

editor/js/Sidebar.Material.js

@@ -27,6 +27,23 @@ Sidebar.Material = function ( editor ) {
 	container.add( new UI.Text().setValue( 'MATERIAL' ).setColor( '#666' ) );
 	container.add( new UI.Break(), new UI.Break() );
 
+	// uuid
+
+	var materialUUIDRow = new UI.Panel();
+	var materialUUID = new UI.Input().setWidth( '115px' ).setColor( '#444' ).setFontSize( '12px' ).setDisabled( true );
+	var materialUUIDRenew = new UI.Button( '⟳' ).setMarginLeft( '7px' ).onClick( function () {
+
+		materialUUID.setValue( THREE.Math.generateUUID() );
+		update();
+
+	} );
+
+	materialUUIDRow.add( new UI.Text( 'UUID' ).setWidth( '90px' ).setColor( '#666' ) );
+	materialUUIDRow.add( materialUUID );
+	materialUUIDRow.add( materialUUIDRenew );
+
+	container.add( materialUUIDRow );
+
 	// name
 
 	var materialNameRow = new UI.Panel();
@@ -245,6 +262,12 @@ Sidebar.Material = function ( editor ) {
 
 		if ( material ) {
 
+			if ( material.uuid !== undefined ) {
+
+				object.uuid = objectUUID.getValue();
+
+			}
+
 			if ( material.name !== undefined ) {
 
 				material.name = materialName.getValue();
@@ -504,6 +527,12 @@ Sidebar.Material = function ( editor ) {
 
 			var material = object.material;
 
+			if ( material.uuid !== undefined ) {
+
+				materialUUID.setValue( material.uuid );
+
+			}
+
 			if ( material.name !== undefined ) {
 
 				materialName.setValue( material.name );

editor/js/Sidebar.Object3D.js

@@ -11,7 +11,7 @@ Sidebar.Object3D = function ( editor ) {
 	container.add( objectType );
 	container.add( new UI.Break(), new UI.Break() );
 
-	// id
+	// uuid
 
 	var objectUUIDRow = new UI.Panel();
 	var objectUUID = new UI.Input().setWidth( '115px' ).setColor( '#444' ).setFontSize( '12px' ).setDisabled( true );

examples/css3d_panorama.html

@@ -58,33 +58,33 @@
 				var sides = [
 					{
 						url: 'textures/cube/Bridge2/posx.jpg',
-						position: new THREE.Vector3( -512, 0, 0 ),
-						rotation: new THREE.Vector3( 0, Math.PI / 2, 0 )
+						position: [ -512, 0, 0 ],
+						rotation: [ 0, Math.PI / 2, 0 ]
 					},
 					{
 						url: 'textures/cube/Bridge2/negx.jpg',
-						position: new THREE.Vector3( 512, 0, 0 ),
-						rotation: new THREE.Vector3( 0, -Math.PI / 2, 0 )
+						position: [ 512, 0, 0 ],
+						rotation: [ 0, -Math.PI / 2, 0 ]
 					},
 					{
 						url: 'textures/cube/Bridge2/posy.jpg',
-						position: new THREE.Vector3( 0,  512, 0 ),
-						rotation: new THREE.Vector3( Math.PI / 2, 0, Math.PI )
+						position: [ 0,  512, 0 ],
+						rotation: [ Math.PI / 2, 0, Math.PI ]
 					},
 					{
 						url: 'textures/cube/Bridge2/negy.jpg',
-						position: new THREE.Vector3( 0, -512, 0 ),
-						rotation: new THREE.Vector3( - Math.PI / 2, 0, Math.PI )
+						position: [ 0, -512, 0 ],
+						rotation: [ - Math.PI / 2, 0, Math.PI ]
 					},
 					{
 						url: 'textures/cube/Bridge2/posz.jpg',
-						position: new THREE.Vector3( 0, 0,  512 ),
-						rotation: new THREE.Vector3( 0, Math.PI, 0 )
+						position: [ 0, 0,  512 ],
+						rotation: [ 0, Math.PI, 0 ]
 					},
 					{
 						url: 'textures/cube/Bridge2/negz.jpg',
-						position: new THREE.Vector3( 0, 0, -512 ),
-						rotation: new THREE.Vector3( 0, 0, 0 )
+						position: [ 0, 0, -512 ],
+						rotation: [ 0, 0, 0 ]
 					}
 				];
 
@@ -97,8 +97,8 @@
 					element.src = side.url;
 
 					var object = new THREE.CSS3DObject( element );
-					object.position = side.position;
-					object.rotation = side.rotation;
+					object.position.fromArray( side.position );
+					object.rotation.fromArray( side.rotation );
 					scene.add( object );
 
 				}

examples/css3d_periodictable.html

@@ -40,15 +40,16 @@
 			}
 
 			.element {
-				width: 140px;
-				height: 180px;
-				box-shadow: 0px 0px 20px rgba(0,255,255,0.5);
+				width: 120px;
+				height: 160px;
+				box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
 				border: 1px solid rgba(127,255,255,0.25);
+				text-align: center;
 				cursor: default;
 			}
 
 			.element:hover {
-				box-shadow: 0px 0px 20px rgba(0,255,255,0.75);
+				box-shadow: 0px 0px 12px rgba(0,255,255,0.75);
 				border: 1px solid rgba(127,255,255,0.75);
 			}
 
@@ -56,18 +57,18 @@
 					position: absolute;
 					top: 20px;
 					right: 20px;
-					font-size: 20px;
+					font-size: 12px;
 					color: rgba(127,255,255,0.75);
 				}
 
 				.element .symbol {
 					position: absolute;
 					top: 40px;
-					width: 100%;
-					font-size: 70px;
-					text-align: center;
-					color: rgba(255,255,255,0.75);
+					left: 0px;
+					right: 0px;
+					font-size: 60px;
 					font-weight: bold;
+					color: rgba(255,255,255,0.75);
 
 					-webkit-filter: drop-shadow(0px 0px 20px rgba(0,255,255,0.95));
 					-moz-filter: drop-shadow(0px 0px 20px rgba(0,255,255,0.95));
@@ -78,10 +79,10 @@
 
 				.element .details {
 					position: absolute;
-					top: 125px;
-					width: 100%;
-					font-size: 18px;
-					text-align: center;
+					bottom: 15px;
+					left: 0px;
+					right: 0px;
+					font-size: 12px;
 					color: rgba(127,255,255,0.75);
 				}
 
@@ -252,7 +253,7 @@
 			function init() {
 
 				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
-				camera.position.z = 1800;
+				camera.position.z = 1500;
 
 				scene = new THREE.Scene();
 
@@ -290,8 +291,8 @@
 					//
 
 					var object = new THREE.Object3D();
-					object.position.x = ( table[ i + 3 ] * 160 ) - 1540;
-					object.position.y = - ( table[ i + 4 ] * 200 ) + 1100;
+					object.position.x = ( table[ i + 3 ] * 140 ) - 1330;
+					object.position.y = - ( table[ i + 4 ] * 180 ) + 990;
 
 					targets.table.push( object );
 
@@ -308,9 +309,9 @@
 
 					var object = new THREE.Object3D();
 
-					object.position.x = 1000 * Math.cos( theta ) * Math.sin( phi );
-					object.position.y = 1000 * Math.sin( theta ) * Math.sin( phi );
-					object.position.z = 1000 * Math.cos( phi );
+					object.position.x = 800 * Math.cos( theta ) * Math.sin( phi );
+					object.position.y = 800 * Math.sin( theta ) * Math.sin( phi );
+					object.position.z = 800 * Math.cos( phi );
 
 					vector.copy( object.position ).multiplyScalar( 2 );
 
@@ -330,9 +331,9 @@
 
 					var object = new THREE.Object3D();
 
-					object.position.x = 1100 * Math.sin( phi );
+					object.position.x = 900 * Math.sin( phi );
 					object.position.y = - ( i * 8 ) + 450;
-					object.position.z = 1100 * Math.cos( phi );
+					object.position.z = 900 * Math.cos( phi );
 
 					vector.x = object.position.x * 2;
 					vector.y = object.position.y;
@@ -442,6 +443,8 @@
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				render();
+
 			}
 
 			function animate() {

examples/js/renderers/CSS3DRenderer.js

@@ -57,16 +57,9 @@ THREE.CSS3DRenderer = function () {
 	domElement.style.overflow = 'hidden';
 
 	domElement.style.WebkitTransformStyle = 'preserve-3d';
-	domElement.style.WebkitPerspectiveOrigin = '50% 50%';
-
 	domElement.style.MozTransformStyle = 'preserve-3d';
-	domElement.style.MozPerspectiveOrigin = '50% 50%';
-
 	domElement.style.oTransformStyle = 'preserve-3d';
-	domElement.style.oPerspectiveOrigin = '50% 50%';
-
 	domElement.style.transformStyle = 'preserve-3d';
-	domElement.style.perspectiveOrigin = '50% 50%';
 
 	this.domElement = domElement;