Sidebar.Project.js 4.4 KB

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