Sidebar.Geometry.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. Sidebar.Geometry = function ( editor ) {
  2. var signals = editor.signals;
  3. var container = new UI.Panel();
  4. container.setBorderTop( '1px solid #ccc' );
  5. container.setPadding( '10px' );
  6. container.setDisplay( 'none' );
  7. container.add( new UI.Text().setValue( 'GEOMETRY' ).setColor( '#666' ) );
  8. container.add( new UI.Break(), new UI.Break() );
  9. // uuid
  10. var geometryUUIDRow = new UI.Panel();
  11. var geometryUUID = new UI.Input().setWidth( '115px' ).setColor( '#444' ).setFontSize( '12px' ).setDisabled( true );
  12. var geometryUUIDRenew = new UI.Button( '⟳' ).setMarginLeft( '7px' ).onClick( function () {
  13. geometryUUID.setValue( THREE.Math.generateUUID() );
  14. update();
  15. } );
  16. geometryUUIDRow.add( new UI.Text( 'UUID' ).setWidth( '90px' ).setColor( '#666' ) );
  17. geometryUUIDRow.add( geometryUUID );
  18. geometryUUIDRow.add( geometryUUIDRenew );
  19. container.add( geometryUUIDRow );
  20. // name
  21. var geometryNameRow = new UI.Panel();
  22. var geometryName = new UI.Input().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
  23. geometryNameRow.add( new UI.Text( 'Name' ).setWidth( '90px' ).setColor( '#666' ) );
  24. geometryNameRow.add( geometryName );
  25. container.add( geometryNameRow );
  26. // class
  27. var geometryTypeRow = new UI.Panel();
  28. var geometryType = new UI.Text().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' );
  29. geometryTypeRow.add( new UI.Text( 'Class' ).setWidth( '90px' ).setColor( '#666' ) );
  30. geometryTypeRow.add( geometryType );
  31. container.add( geometryTypeRow );
  32. // vertices
  33. var geometryVerticesRow = new UI.Panel();
  34. var geometryVertices = new UI.Text().setColor( '#444' ).setFontSize( '12px' );
  35. geometryVerticesRow.add( new UI.Text( 'Vertices' ).setWidth( '90px' ).setColor( '#666' ) );
  36. geometryVerticesRow.add( geometryVertices );
  37. container.add( geometryVerticesRow );
  38. // faces
  39. var geometryFacesRow = new UI.Panel();
  40. var geometryFaces = new UI.Text().setColor( '#444' ).setFontSize( '12px' );
  41. geometryFacesRow.add( new UI.Text( 'Faces' ).setWidth( '90px' ).setColor( '#666' ) );
  42. geometryFacesRow.add( geometryFaces );
  43. container.add( geometryFacesRow );
  44. // parameters
  45. var parameters;
  46. //
  47. function update() {
  48. var geometry = editor.selected.geometry;
  49. geometry.uuid = geometryUUID.getValue();
  50. geometry.name = geometryName.getValue();
  51. }
  52. function build() {
  53. var object = editor.selected;
  54. if ( object && object.geometry ) {
  55. var geometry = object.geometry;
  56. container.setDisplay( 'block' );
  57. geometryType.setValue( editor.getGeometryType( object.geometry ) );
  58. updateFields( geometry );
  59. //
  60. if ( parameters !== undefined ) {
  61. container.remove( parameters );
  62. parameters = undefined;
  63. }
  64. if ( geometry instanceof THREE.CircleGeometry ) {
  65. parameters = new Sidebar.Geometry.CircleGeometry( signals, object );
  66. container.add( parameters );
  67. } else if ( geometry instanceof THREE.CubeGeometry ) {
  68. parameters = new Sidebar.Geometry.CubeGeometry( signals, object );
  69. container.add( parameters );
  70. } else if ( geometry instanceof THREE.CylinderGeometry ) {
  71. parameters = new Sidebar.Geometry.CylinderGeometry( signals, object );
  72. container.add( parameters );
  73. } else if ( geometry instanceof THREE.SphereGeometry ) {
  74. parameters = new Sidebar.Geometry.SphereGeometry( signals, object );
  75. container.add( parameters );
  76. } else if ( geometry instanceof THREE.IcosahedronGeometry ) {
  77. parameters = new Sidebar.Geometry.IcosahedronGeometry( signals, object );
  78. container.add( parameters );
  79. } else if ( geometry instanceof THREE.PlaneGeometry ) {
  80. parameters = new Sidebar.Geometry.PlaneGeometry( signals, object );
  81. container.add( parameters );
  82. } else if ( geometry instanceof THREE.TorusGeometry ) {
  83. parameters = new Sidebar.Geometry.TorusGeometry( signals, object );
  84. container.add( parameters );
  85. } else if ( geometry instanceof THREE.TorusKnotGeometry ) {
  86. parameters = new Sidebar.Geometry.TorusKnotGeometry( signals, object );
  87. container.add( parameters );
  88. }
  89. } else {
  90. container.setDisplay( 'none' );
  91. }
  92. }
  93. signals.objectSelected.add( build );
  94. signals.objectChanged.add( build );
  95. //
  96. function updateFields( geometry ) {
  97. geometryUUID.setValue( geometry.uuid );
  98. geometryName.setValue( geometry.name );
  99. if ( geometry instanceof THREE.Geometry ) {
  100. geometryVertices.setValue( geometry.vertices.length );
  101. geometryFaces.setValue( geometry.faces.length );
  102. } else if ( geometry instanceof THREE.BufferGeometry ) {
  103. geometryVertices.setValue( geometry.attributes.position.numItems / 3 );
  104. if ( geometry.attributes.index !== undefined ) {
  105. geometryFaces.setValue( geometry.attributes.index.numItems / 3 );
  106. } else {
  107. geometryFaces.setValue( geometry.attributes.position.numItems / 3 / 3 );
  108. }
  109. }
  110. }
  111. return container;
  112. }