Sidebar.Project.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. /**
  2. * @author mrdoob / http://mrdoob.com/
  3. */
  4. Sidebar.Project = function ( editor ) {
  5. var config = editor.config;
  6. var signals = editor.signals;
  7. var strings = editor.strings;
  8. var rendererTypes = {
  9. 'WebGLRenderer': THREE.WebGLRenderer,
  10. 'SVGRenderer': THREE.SVGRenderer,
  11. 'SoftwareRenderer': THREE.SoftwareRenderer,
  12. 'RaytracingRenderer': THREE.RaytracingRenderer
  13. };
  14. var container = new UI.Panel();
  15. container.setBorderTop( '0' );
  16. container.setPaddingTop( '20px' );
  17. // Title
  18. var titleRow = new UI.Row();
  19. var title = new UI.Input( config.getKey( 'project/title' ) ).setLeft( '100px' ).onChange( function () {
  20. config.setKey( 'project/title', this.getValue() );
  21. } );
  22. titleRow.add( new UI.Text( strings.getKey( 'sidebar/project/title' ) ).setWidth( '90px' ) );
  23. titleRow.add( title );
  24. container.add( titleRow );
  25. // Editable
  26. var editableRow = new UI.Row();
  27. var editable = new UI.Checkbox( config.getKey( 'project/editable' ) ).setLeft( '100px' ).onChange( function () {
  28. config.setKey( 'project/editable', this.getValue() );
  29. } );
  30. editableRow.add( new UI.Text( strings.getKey( 'sidebar/project/editable' ) ).setWidth( '90px' ) );
  31. editableRow.add( editable );
  32. container.add( editableRow );
  33. // VR
  34. var vrRow = new UI.Row();
  35. var vr = new UI.Checkbox( config.getKey( 'project/vr' ) ).setLeft( '100px' ).onChange( function () {
  36. config.setKey( 'project/vr', this.getValue() );
  37. } );
  38. vrRow.add( new UI.Text( strings.getKey( 'sidebar/project/vr' ) ).setWidth( '90px' ) );
  39. vrRow.add( vr );
  40. container.add( vrRow );
  41. // Renderer
  42. var options = {};
  43. for ( var key in rendererTypes ) {
  44. if ( key.indexOf( 'WebGL' ) >= 0 && System.support.webgl === false ) continue;
  45. var optionTxt = '???';
  46. if ( key === 'WebGLRenderer' ) {
  47. optionTxt = strings.getKey( 'sidebar/project/renderer/webglrenderer' )
  48. } else if ( key === 'SVGRenderer' ) {
  49. optionTxt = strings.getKey( 'sidebar/project/renderer/svgrenderer' )
  50. } else if ( key === 'SoftwareRenderer' ) {
  51. optionTxt = strings.getKey( 'sidebar/project/renderer/softwarerenderer' )
  52. } else if ( key === 'RaytracingRenderer' ) {
  53. optionTxt = strings.getKey( 'sidebar/project/renderer/raytracingrenderer' )
  54. }
  55. options[ key ] = optionTxt;
  56. }
  57. var rendererTypeRow = new UI.Row();
  58. var rendererType = new UI.Select().setOptions( options ).setWidth( '150px' ).onChange( function () {
  59. var value = this.getValue();
  60. config.setKey( 'project/renderer', value );
  61. updateRenderer();
  62. } );
  63. rendererTypeRow.add( new UI.Text( strings.getKey( 'sidebar/project/renderer' ) ).setWidth( '90px' ) );
  64. rendererTypeRow.add( rendererType );
  65. container.add( rendererTypeRow );
  66. if ( config.getKey( 'project/renderer' ) !== undefined ) {
  67. rendererType.setValue( config.getKey( 'project/renderer' ) );
  68. }
  69. // Renderer / Antialias
  70. var rendererPropertiesRow = new UI.Row().setMarginLeft( '90px' );
  71. var rendererAntialias = new UI.THREE.Boolean( config.getKey( 'project/renderer/antialias' ), strings.getKey( 'sidebar/project/antialias' ) ).onChange( function () {
  72. config.setKey( 'project/renderer/antialias', this.getValue() );
  73. updateRenderer();
  74. } );
  75. rendererPropertiesRow.add( rendererAntialias );
  76. // Renderer / Shadows
  77. var rendererShadows = new UI.THREE.Boolean( config.getKey( 'project/renderer/shadows' ), strings.getKey( 'sidebar/project/shadows' ) ).onChange( function () {
  78. config.setKey( 'project/renderer/shadows', this.getValue() );
  79. updateRenderer();
  80. } );
  81. rendererPropertiesRow.add( rendererShadows );
  82. rendererPropertiesRow.add( new UI.Break() );
  83. // Renderer / Gamma input
  84. var rendererGammaInput = new UI.THREE.Boolean( config.getKey( 'project/renderer/gammaInput' ), strings.getKey( 'sidebar/project/gammainput' ) ).onChange( function () {
  85. config.setKey( 'project/renderer/gammaInput', this.getValue() );
  86. updateRenderer();
  87. } );
  88. rendererPropertiesRow.add( rendererGammaInput );
  89. // Renderer / Gamma output
  90. var rendererGammaOutput = new UI.THREE.Boolean( config.getKey( 'project/renderer/gammaOutput' ), strings.getKey( 'sidebar/project/gammaoutput' ) ).onChange( function () {
  91. config.setKey( 'project/renderer/gammaOutput', this.getValue() );
  92. updateRenderer();
  93. } );
  94. rendererPropertiesRow.add( rendererGammaOutput );
  95. container.add( rendererPropertiesRow );
  96. //
  97. function updateRenderer() {
  98. createRenderer( rendererType.getValue(), rendererAntialias.getValue(), rendererShadows.getValue(), rendererGammaInput.getValue(), rendererGammaOutput.getValue() );
  99. }
  100. function createRenderer( type, antialias, shadows, gammaIn, gammaOut ) {
  101. rendererPropertiesRow.setDisplay( type === 'WebGLRenderer' ? '' : 'none' );
  102. var renderer = new rendererTypes[ type ]( { antialias: antialias} );
  103. renderer.gammaInput = gammaIn;
  104. renderer.gammaOutput = gammaOut;
  105. if ( shadows && renderer.shadowMap ) {
  106. renderer.shadowMap.enabled = true;
  107. // renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  108. }
  109. signals.rendererChanged.dispatch( renderer );
  110. }
  111. createRenderer( config.getKey( 'project/renderer' ), config.getKey( 'project/renderer/antialias' ), config.getKey( 'project/renderer/shadows' ), config.getKey( 'project/renderer/gammaInput' ), config.getKey( 'project/renderer/gammaOutput' ) );
  112. return container;
  113. };