Viewport.Controls.js 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. import { UIPanel, UISelect } from './libs/ui.js';
  2. import { UIBoolean } from './libs/ui.three.js';
  3. function ViewportControls( editor ) {
  4. const signals = editor.signals;
  5. const strings = editor.strings;
  6. const container = new UIPanel();
  7. container.setPosition( 'absolute' );
  8. container.setRight( '10px' );
  9. container.setTop( '10px' );
  10. container.setColor( '#ffffff' );
  11. // grid
  12. const gridCheckbox = new UIBoolean( true, strings.getKey( 'viewport/controls/grid' ) );
  13. gridCheckbox.onChange( function () {
  14. signals.showGridChanged.dispatch( this.getValue() );
  15. } );
  16. container.add( gridCheckbox );
  17. // helpers
  18. const helpersCheckbox = new UIBoolean( true, strings.getKey( 'viewport/controls/helpers' ) );
  19. helpersCheckbox.onChange( function () {
  20. signals.showHelpersChanged.dispatch( this.getValue() );
  21. } );
  22. container.add( helpersCheckbox );
  23. // camera
  24. const cameraSelect = new UISelect();
  25. cameraSelect.setMarginLeft( '10px' );
  26. cameraSelect.setMarginRight( '10px' );
  27. cameraSelect.onChange( function () {
  28. editor.setViewportCamera( this.getValue() );
  29. } );
  30. container.add( cameraSelect );
  31. signals.cameraAdded.add( update );
  32. signals.cameraRemoved.add( update );
  33. // shading
  34. const shadingSelect = new UISelect();
  35. shadingSelect.setOptions( { 'realistic': 'realistic', 'solid': 'solid', 'normals': 'normals', 'wireframe': 'wireframe' } );
  36. shadingSelect.setValue( 'solid' );
  37. shadingSelect.onChange( function () {
  38. editor.setViewportShading( this.getValue() );
  39. } );
  40. container.add( shadingSelect );
  41. signals.editorCleared.add( function () {
  42. shadingSelect.setValue( 'solid' );
  43. editor.setViewportShading( shadingSelect.getValue() );
  44. } );
  45. update();
  46. //
  47. function update() {
  48. const options = {};
  49. const cameras = editor.cameras;
  50. for ( const key in cameras ) {
  51. const camera = cameras[ key ];
  52. options[ camera.uuid ] = camera.name;
  53. }
  54. cameraSelect.setOptions( options );
  55. cameraSelect.setValue( editor.viewportCamera.uuid );
  56. }
  57. return container;
  58. }
  59. export { ViewportControls };