Editor: Add basic support for showing morph targets. (mrdoob#24084)

Author: Mugen87

editor/js/Sidebar.Geometry.BufferGeometry.js

@@ -1,4 +1,4 @@
-import { UIRow, UIText, UISpan, UIBreak } from './libs/ui.js';
+import { UIRow, UIText, UISpan, UIBreak, UICheckbox } from './libs/ui.js';
 
 function SidebarGeometryBufferGeometry( editor ) {
 
@@ -20,19 +20,23 @@ function SidebarGeometryBufferGeometry( editor ) {
 			container.clear();
 			container.setDisplay( 'block' );
 
-			const text = new UIText( strings.getKey( 'sidebar/geometry/buffer_geometry/attributes' ) ).setWidth( '90px' );
-			container.add( text );
+			// attributes
 
-			const container2 = new UISpan().setDisplay( 'inline-block' ).setVerticalAlign( 'middle' ).setWidth( '160px' );
-			container.add( container2 );
+			const attributesRow = new UIRow();
+
+			const textAttributes = new UIText( strings.getKey( 'sidebar/geometry/buffer_geometry/attributes' ) ).setWidth( '90px' );
+			attributesRow.add( textAttributes );
+
+			const containerAttributes = new UISpan().setDisplay( 'inline-block' ).setVerticalAlign( 'middle' ).setWidth( '160px' );
+			attributesRow.add( containerAttributes );
 
 			const index = geometry.index;
 
 			if ( index !== null ) {
 
-				container2.add( new UIText( strings.getKey( 'sidebar/geometry/buffer_geometry/index' ) ).setWidth( '80px' ) );
-				container2.add( new UIText( ( index.count ).format() ).setFontSize( '12px' ) );
-				container2.add( new UIBreak() );
+				containerAttributes.add( new UIText( strings.getKey( 'sidebar/geometry/buffer_geometry/index' ) ).setWidth( '80px' ) );
+				containerAttributes.add( new UIText( ( index.count ).format() ).setFontSize( '12px' ) );
+				containerAttributes.add( new UIBreak() );
 
 			}
 
@@ -42,9 +46,54 @@ function SidebarGeometryBufferGeometry( editor ) {
 
 				const attribute = attributes[ name ];
 
-				container2.add( new UIText( name ).setWidth( '80px' ) );
-				container2.add( new UIText( ( attribute.count ).format() + ' (' + attribute.itemSize + ')' ).setFontSize( '12px' ) );
-				container2.add( new UIBreak() );
+				containerAttributes.add( new UIText( name ).setWidth( '80px' ) );
+				containerAttributes.add( new UIText( ( attribute.count ).format() + ' (' + attribute.itemSize + ')' ).setFontSize( '12px' ) );
+				containerAttributes.add( new UIBreak() );
+
+			}
+
+			container.add( attributesRow );
+
+			// morph targets
+
+			const morphAttributes = geometry.morphAttributes;
+			const hasMorphTargets = Object.keys( morphAttributes ).length > 0;
+
+			if ( hasMorphTargets === true ) {
+
+				// morph attributes
+
+				const rowMorphAttributes = new UIRow();
+
+				const textMorphAttributes = new UIText( strings.getKey( 'sidebar/geometry/buffer_geometry/morphAttributes' ) ).setWidth( '90px' );
+				rowMorphAttributes.add( textMorphAttributes );
+
+				const containerMorphAttributes = new UISpan().setDisplay( 'inline-block' ).setVerticalAlign( 'middle' ).setWidth( '160px' );
+				rowMorphAttributes.add( containerMorphAttributes );
+
+				for ( const name in morphAttributes ) {
+
+					const morphTargets = morphAttributes[ name ];
+
+					containerMorphAttributes.add( new UIText( name ).setWidth( '80px' ) );
+					containerMorphAttributes.add( new UIText( ( morphTargets.length ).format() ).setFontSize( '12px' ) );
+					containerMorphAttributes.add( new UIBreak() );
+
+				}
+
+				container.add( rowMorphAttributes );
+
+				// morph relative
+
+				const rowMorphRelative = new UIRow();
+
+				const textMorphRelative = new UIText( strings.getKey( 'sidebar/geometry/buffer_geometry/morphRelative' ) ).setWidth( '90px' );
+				rowMorphRelative.add( textMorphRelative );
+
+				const checkboxMorphRelative = new UICheckbox().setValue( geometry.morphTargetsRelative ).setDisabled( true );
+				rowMorphRelative.add( checkboxMorphRelative );
+
+				container.add( rowMorphRelative );
 
 			}
 

editor/js/Strings.js

@@ -144,6 +144,8 @@ function Strings( config ) {
 
 			'sidebar/geometry/buffer_geometry/attributes': 'Attributes',
 			'sidebar/geometry/buffer_geometry/index': 'index',
+			'sidebar/geometry/buffer_geometry/morphAttributes': 'Morph Attributes',
+			'sidebar/geometry/buffer_geometry/morphRelative': 'Morph Relative',
 
 			'sidebar/geometry/capsule_geometry/radius': 'Radius',
 			'sidebar/geometry/capsule_geometry/length': 'Length',
@@ -479,6 +481,8 @@ function Strings( config ) {
 
 			'sidebar/geometry/buffer_geometry/attributes': 'Attributs',
 			'sidebar/geometry/buffer_geometry/index': 'index',
+			'sidebar/geometry/buffer_geometry/morphAttributes': 'Morph Attributes',
+			'sidebar/geometry/buffer_geometry/morphRelative': 'Morph Relative',
 
 			'sidebar/geometry/capsule_geometry/radius': 'Radius',
 			'sidebar/geometry/capsule_geometry/length': 'Length',
@@ -814,6 +818,8 @@ function Strings( config ) {
 
 			'sidebar/geometry/buffer_geometry/attributes': '属性',
 			'sidebar/geometry/buffer_geometry/index': '索引',
+			'sidebar/geometry/buffer_geometry/morphAttributes': 'Morph Attributes',
+			'sidebar/geometry/buffer_geometry/morphRelative': 'Morph Relative',
 
 			'sidebar/geometry/capsule_geometry/radius': '半径',
 			'sidebar/geometry/capsule_geometry/length': '长度',