Sidebar.Geometry.ShapeGeometry.js 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. import * as THREE from 'three';
  2. import { UIDiv, UIRow, UIText, UIInteger, UIButton } from './libs/ui.js';
  3. import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
  4. function GeometryParametersPanel( editor, object ) {
  5. const strings = editor.strings;
  6. const signals = editor.signals;
  7. const container = new UIDiv();
  8. const geometry = object.geometry;
  9. const parameters = geometry.parameters;
  10. // curveSegments
  11. const curveSegmentsRow = new UIRow();
  12. const curveSegments = new UIInteger( parameters.curveSegments || 12 ).onChange( changeShape ).setRange( 1, Infinity );
  13. curveSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/shape_geometry/curveSegments' ) ).setClass( 'Label' ) );
  14. curveSegmentsRow.add( curveSegments );
  15. container.add( curveSegmentsRow );
  16. // to extrude
  17. const button = new UIButton( strings.getKey( 'sidebar/geometry/shape_geometry/extrude' ) ).onClick( toExtrude ).setClass( 'Label' ).setMarginLeft( '120px' );
  18. container.add( button );
  19. //
  20. function refreshUI() {
  21. const parameters = object.geometry.parameters;
  22. curveSegments.setValue( parameters.curveSegments );
  23. }
  24. signals.geometryChanged.add( refreshUI );
  25. //
  26. function changeShape() {
  27. editor.execute( new SetGeometryCommand( editor, object, new THREE.ShapeGeometry(
  28. parameters.shapes,
  29. curveSegments.getValue()
  30. ) ) );
  31. }
  32. function toExtrude() {
  33. editor.execute( new SetGeometryCommand( editor, object, new THREE.ExtrudeGeometry(
  34. parameters.shapes, {
  35. curveSegments: curveSegments.getValue()
  36. }
  37. ) ) );
  38. }
  39. return container;
  40. }
  41. export { GeometryParametersPanel };