Editor: Display BoundingBox values instead of BoundingSphere

editor/js/Sidebar.Geometry.BufferGeometry.js

@@ -23,7 +23,7 @@ function SidebarGeometryBufferGeometry( editor ) {
 			var text = new UIText( strings.getKey( 'sidebar/geometry/buffer_geometry/attributes' ) ).setWidth( '90px' );
 			container.add( text );
 
-			var container2 = new UISpan().setDisplay( 'inline-block' ).setWidth( '160px' );
+			var container2 = new UISpan().setDisplay( 'inline-block' ).setVerticalAlign( 'middle' ).setWidth( '160px' );
 			container.add( container2 );
 
 			var index = geometry.index;

editor/js/Sidebar.Geometry.js

@@ -146,12 +146,12 @@ function SidebarGeometry( editor ) {
 
 	container.add( new SidebarGeometryBufferGeometry( editor ) );
 
-	// size
+	// Size
 
-	var geometryBoundingSphere = new UIText();
+	var geometryBoundingBox = new UIText().setFontSize( '12px' ).setVerticalAlign( 'middle' );
 
 	container.add( new UIText( strings.getKey( 'sidebar/geometry/bounds' ) ).setWidth( '90px' ) );
-	container.add( geometryBoundingSphere );
+	container.add( geometryBoundingBox );
 
 	// Helpers
 
@@ -216,9 +216,14 @@ function SidebarGeometry( editor ) {
 
 			}
 
-			if ( geometry.boundingSphere === null ) geometry.computeBoundingSphere();
+			if ( geometry.boundingBox === null ) geometry.computeBoundingBox();
 
-			geometryBoundingSphere.setValue( Math.floor( geometry.boundingSphere.radius * 1000 ) / 1000 );
+			const boundingBox = geometry.boundingBox;
+			const x = Math.floor( ( boundingBox.max.x - boundingBox.min.x ) * 1000 ) / 1000;
+			const y = Math.floor( ( boundingBox.max.y - boundingBox.min.y ) * 1000 ) / 1000;
+			const z = Math.floor( ( boundingBox.max.z - boundingBox.min.z ) * 1000 ) / 1000;
+
+			geometryBoundingBox.setInnerHTML( `${x}<br/>${y}<br/>${z}` );
 
 		} else {
 

editor/js/libs/ui.js

@@ -126,6 +126,12 @@ class UIElement {
 
 	}
 
+	setInnerHTML( value ) {
+
+		this.dom.innerHTML = value;
+
+	}
+
 	getIndexOfChild( element ) {
 
 		return Array.prototype.indexOf.call( this.dom.children, element.dom );
@@ -137,7 +143,7 @@ class UIElement {
 // properties
 
 const properties = [ 'position', 'left', 'top', 'right', 'bottom', 'width', 'height', 'border', 'borderLeft',
-	'borderTop', 'borderRight', 'borderBottom', 'borderColor', 'display', 'overflow', 'margin', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'padding', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'color',
+	'borderTop', 'borderRight', 'borderBottom', 'borderColor', 'display', 'overflow', 'margin', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'padding', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'verticalAlign', 'color',
 	'background', 'backgroundColor', 'opacity', 'fontSize', 'fontWeight', 'textAlign', 'textDecoration', 'textTransform', 'cursor', 'zIndex' ];
 
 properties.forEach( function ( property ) {
@@ -225,7 +231,6 @@ class UIText extends UISpan {
 		this.dom.className = 'Text';
 		this.dom.style.cursor = 'default';
 		this.dom.style.display = 'inline-block';
-		this.dom.style.verticalAlign = 'middle';
 
 		this.setValue( text );