SideBar.Properties.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. var Properties = function ( signals ) {
  2. var selected = null;
  3. var container = new UI.Panel();
  4. container.setDisplay( 'none' );
  5. container.setPadding( '8px' );
  6. container.setBorderTop( '1px solid #ccc' );
  7. container.add( new UI.Text().setText( 'PROPERTIES' ).setColor( '#666' ) );
  8. container.add( new UI.Break(), new UI.Break() );
  9. container.add( new UI.Text().setText( 'position' ).setColor( '#666' ) );
  10. var positionX = new UI.FloatNumber( 'absolute' ).setLeft( '90px' ).onChanged( update );
  11. var positionY = new UI.FloatNumber( 'absolute' ).setLeft( '160px' ).onChanged( update );
  12. var positionZ = new UI.FloatNumber( 'absolute' ).setLeft( '230px' ).onChanged( update );
  13. container.add( positionX, positionY, positionZ );
  14. container.add( new UI.HorizontalRule() );
  15. container.add( new UI.Text().setText( 'rotation' ).setColor( '#666' ) );
  16. var rotationX = new UI.FloatNumber( 'absolute' ).setLeft( '90px' ).onChanged( update );
  17. var rotationY = new UI.FloatNumber( 'absolute' ).setLeft( '160px' ).onChanged( update );
  18. var rotationZ = new UI.FloatNumber( 'absolute' ).setLeft( '230px' ).onChanged( update );
  19. container.add( rotationX, rotationY, rotationZ );
  20. container.add( new UI.HorizontalRule() );
  21. container.add( new UI.Text().setText( 'scale' ).setColor( '#666' ) );
  22. var scaleX = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '90px' ).onChanged( update );
  23. var scaleY = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '160px' ).onChanged( update );
  24. var scaleZ = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '230px' ).onChanged( update );
  25. container.add( scaleX, scaleY, scaleZ );
  26. container.add( new UI.Break(), new UI.Break(), new UI.Break() );
  27. // Geometry
  28. container.add( new UI.Text().setText( 'GEOMETRY' ).setColor( '#666' ) );
  29. container.add( new UI.Break(), new UI.Break() );
  30. container.add( new UI.Text().setText( 'class' ).setColor( '#666' ) );
  31. var geometryClass = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
  32. container.add( geometryClass );
  33. container.add( new UI.HorizontalRule() );
  34. container.add( new UI.Text().setText( 'vertices' ).setColor( '#666' ) );
  35. var verticesCount = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
  36. container.add( verticesCount );
  37. container.add( new UI.HorizontalRule() );
  38. container.add( new UI.Text().setText( 'faces' ).setColor( '#666' ) );
  39. var facesCount = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
  40. container.add( facesCount );
  41. container.add( new UI.HorizontalRule() );
  42. container.add( new UI.Text().setText( 'colors' ).setColor( '#666' ) );
  43. var colorsCount = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
  44. container.add( colorsCount );
  45. container.add( new UI.Break(), new UI.Break(), new UI.Break() );
  46. // Material
  47. container.add( new UI.Text().setText( 'MATERIAL' ).setColor( '#666' ) );
  48. container.add( new UI.Break(), new UI.Break(), new UI.Break() );
  49. container.add( new UI.Text().setText( 'class' ).setColor( '#666' ) );
  50. var materialClass = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
  51. container.add( materialClass );
  52. // Events
  53. function update() {
  54. if ( selected ) {
  55. selected.position.x = positionX.getValue();
  56. selected.position.y = positionY.getValue();
  57. selected.position.z = positionZ.getValue();
  58. selected.rotation.x = rotationX.getValue();
  59. selected.rotation.y = rotationY.getValue();
  60. selected.rotation.z = rotationZ.getValue();
  61. selected.scale.x = scaleX.getValue();
  62. selected.scale.y = scaleY.getValue();
  63. selected.scale.z = scaleZ.getValue();
  64. signals.objectChanged.dispatch( selected );
  65. }
  66. }
  67. signals.objectSelected.add( function ( object ) {
  68. selected = object;
  69. if ( object ) {
  70. container.setDisplay( 'block' );
  71. positionX.setValue( object.position.x );
  72. positionY.setValue( object.position.y );
  73. positionZ.setValue( object.position.z );
  74. rotationX.setValue( object.rotation.x );
  75. rotationY.setValue( object.rotation.y );
  76. rotationZ.setValue( object.rotation.z );
  77. scaleX.setValue( object.scale.x );
  78. scaleY.setValue( object.scale.y );
  79. scaleZ.setValue( object.scale.z );
  80. geometryClass.setText( getGeometryInstanceName( object.geometry ) );
  81. verticesCount.setText( object.geometry.vertices.length );
  82. facesCount.setText( object.geometry.faces.length );
  83. colorsCount.setText( object.geometry.colors.length );
  84. materialClass.setText( getMaterialInstanceName( object.material ) );
  85. } else {
  86. container.setDisplay( 'none' );
  87. }
  88. } );
  89. function getGeometryInstanceName( geometry ) {
  90. // TODO: Is there a way of doing this automatically?
  91. if ( geometry instanceof THREE.ConvexGeometry ) return "ConvexGeometry";
  92. if ( geometry instanceof THREE.CubeGeometry ) return "CubeGeometry";
  93. if ( geometry instanceof THREE.CylinderGeometry ) return "CylinderGeometry";
  94. if ( geometry instanceof THREE.ExtrudeGeometry ) return "ExtrudeGeometry";
  95. if ( geometry instanceof THREE.IcosahedronGeometry ) return "IcosahedronGeometry";
  96. if ( geometry instanceof THREE.LatheGeometry ) return "LatheGeometry";
  97. if ( geometry instanceof THREE.OctahedronGeometry ) return "OctahedronGeometry";
  98. if ( geometry instanceof THREE.ParametricGeometry ) return "ParametricGeometry";
  99. if ( geometry instanceof THREE.PlaneGeometry ) return "PlaneGeometry";
  100. if ( geometry instanceof THREE.PolyhedronGeometry ) return "PolyhedronGeometry";
  101. if ( geometry instanceof THREE.SphereGeometry ) return "SphereGeometry";
  102. if ( geometry instanceof THREE.TetrahedronGeometry ) return "TetrahedronGeometry";
  103. if ( geometry instanceof THREE.TextGeometry ) return "TextGeometry";
  104. if ( geometry instanceof THREE.TorusGeometry ) return "TorusGeometry";
  105. if ( geometry instanceof THREE.TorusKnotGeometry ) return "TorusKnotGeometry";
  106. if ( geometry instanceof THREE.TubeGeometry ) return "TubeGeometry";
  107. if ( geometry instanceof THREE.Geometry ) return "Geometry";
  108. }
  109. function getMaterialInstanceName( material ) {
  110. // TODO: Is there a way of doing this automatically?
  111. if ( material instanceof THREE.LineBasicMaterial ) return "LineBasicMaterial";
  112. if ( material instanceof THREE.MeshBasicMaterial ) return "MeshBasicMaterial";
  113. if ( material instanceof THREE.MeshDepthMaterial ) return "MeshDepthMaterial";
  114. if ( material instanceof THREE.MeshFaceMaterial ) return "MeshFaceMaterial";
  115. if ( material instanceof THREE.MeshLambertMaterial ) return "MeshLambertMaterial";
  116. if ( material instanceof THREE.MeshNormalMaterial ) return "MeshNormalMaterial";
  117. if ( material instanceof THREE.MeshPhongMaterial ) return "MeshPhongMaterial";
  118. if ( material instanceof THREE.ParticleBasicMaterial ) return "ParticleBasicMaterial";
  119. if ( material instanceof THREE.ParticleCanvasMaterial ) return "ParticleCanvasMaterial";
  120. if ( material instanceof THREE.ParticleDOMMaterial ) return "ParticleDOMMaterial";
  121. if ( material instanceof THREE.ShaderMaterial ) return "ShaderMaterial";
  122. if ( material instanceof THREE.Material ) return "Material";
  123. }
  124. return container;
  125. }