Sidebar.Project.js 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322
  1. /**
  2. * @author mrdoob / http://mrdoob.com/
  3. */
  4. import * as THREE from '../../build/three.module.js';
  5. import { UIPanel, UIRow, UIInput, UICheckbox, UIText, UIListbox, UISpan, UIButton, UISelect, UINumber } from './libs/ui.js';
  6. import { UIBoolean } from './libs/ui.three.js';
  7. import { SetMaterialCommand } from './commands/SetMaterialCommand.js';
  8. function SidebarProject( editor ) {
  9. var config = editor.config;
  10. var signals = editor.signals;
  11. var strings = editor.strings;
  12. var currentRenderer = null;
  13. var currentPmremGenerator = null;
  14. var container = new UISpan();
  15. var projectsettings = new UIPanel();
  16. projectsettings.setBorderTop( '0' );
  17. projectsettings.setPaddingTop( '20px' );
  18. container.add( projectsettings );
  19. // Title
  20. var titleRow = new UIRow();
  21. var title = new UIInput( config.getKey( 'project/title' ) ).setLeft( '100px' ).setWidth( '150px' ).onChange( function () {
  22. config.setKey( 'project/title', this.getValue() );
  23. } );
  24. titleRow.add( new UIText( strings.getKey( 'sidebar/project/title' ) ).setWidth( '90px' ) );
  25. titleRow.add( title );
  26. projectsettings.add( titleRow );
  27. // Editable
  28. var editableRow = new UIRow();
  29. var editable = new UICheckbox( config.getKey( 'project/editable' ) ).setLeft( '100px' ).onChange( function () {
  30. config.setKey( 'project/editable', this.getValue() );
  31. } );
  32. editableRow.add( new UIText( strings.getKey( 'sidebar/project/editable' ) ).setWidth( '90px' ) );
  33. editableRow.add( editable );
  34. projectsettings.add( editableRow );
  35. // WebVR
  36. var vrRow = new UIRow();
  37. var vr = new UICheckbox( config.getKey( 'project/vr' ) ).setLeft( '100px' ).onChange( function () {
  38. config.setKey( 'project/vr', this.getValue() );
  39. } );
  40. vrRow.add( new UIText( strings.getKey( 'sidebar/project/vr' ) ).setWidth( '90px' ) );
  41. vrRow.add( vr );
  42. projectsettings.add( vrRow );
  43. // Renderer
  44. var rendererPanel = new UIPanel();
  45. container.add( rendererPanel );
  46. var headerRow = new UIRow();
  47. headerRow.add( new UIText( strings.getKey( 'sidebar/project/renderer' ).toUpperCase() ) );
  48. rendererPanel.add( headerRow );
  49. // Renderer / Antialias
  50. var antialiasRow = new UIRow();
  51. var antialiasBoolean = new UIBoolean( config.getKey( 'project/renderer/antialias' ) ).onChange( function () {
  52. config.setKey( 'project/renderer/antialias', this.getValue() );
  53. updateRenderer();
  54. } );
  55. antialiasRow.add( new UIText( strings.getKey( 'sidebar/project/antialias' ) ).setWidth( '90px' ) );
  56. antialiasRow.add( antialiasBoolean );
  57. rendererPanel.add( antialiasRow );
  58. // Renderer / Shadows
  59. var shadowsRow = new UIRow();
  60. var shadowsBoolean = new UIBoolean( config.getKey( 'project/renderer/shadows' ) ).onChange( function () {
  61. config.setKey( 'project/renderer/shadows', this.getValue() );
  62. updateRenderer();
  63. } );
  64. shadowsRow.add( new UIText( strings.getKey( 'sidebar/project/shadows' ) ).setWidth( '90px' ) );
  65. shadowsRow.add( shadowsBoolean );
  66. var shadowTypeSelect = new UISelect().setOptions( {
  67. 0: 'Basic',
  68. 1: 'PCF',
  69. 2: 'PCF (Soft)',
  70. // 3: 'VSM'
  71. } ).setWidth( '125px' ).onChange( function () {
  72. config.setKey( 'project/renderer/shadowType', parseFloat( this.getValue() ) );
  73. updateRenderer();
  74. } );
  75. shadowTypeSelect.setValue( config.getKey( 'project/renderer/shadowType' ) );
  76. shadowsRow.add( shadowTypeSelect );
  77. rendererPanel.add( shadowsRow );
  78. // Renderer / Physically Correct lights
  79. var physicallyCorrectLightsRow = new UIRow();
  80. var physicallyCorrectLightsBoolean = new UIBoolean( config.getKey( 'project/renderer/physicallyCorrectLights' ) ).onChange( function () {
  81. config.setKey( 'project/renderer/physicallyCorrectLights', this.getValue() );
  82. updateRenderer();
  83. } );
  84. physicallyCorrectLightsRow.add( new UIText( strings.getKey( 'sidebar/project/physicallyCorrectLights' ) ).setWidth( '90px' ) );
  85. physicallyCorrectLightsRow.add( physicallyCorrectLightsBoolean );
  86. rendererPanel.add( physicallyCorrectLightsRow );
  87. // Renderer / Tonemapping
  88. var toneMappingRow = new UIRow();
  89. var toneMappingSelect = new UISelect().setOptions( {
  90. 0: 'None',
  91. 1: 'Linear',
  92. 2: 'Reinhard',
  93. 3: 'Cineon',
  94. 4: 'ACESFilmic'
  95. } ).setWidth( '120px' ).onChange( function () {
  96. var toneMapping = parseFloat( this.getValue() );
  97. config.setKey( 'project/renderer/toneMapping', toneMapping );
  98. updateRenderer();
  99. } );
  100. toneMappingSelect.setValue( config.getKey( 'project/renderer/toneMapping' ) );
  101. toneMappingRow.add( new UIText( strings.getKey( 'sidebar/project/toneMapping' ) ).setWidth( '90px' ) );
  102. toneMappingRow.add( toneMappingSelect );
  103. var toneMappingExposure = new UINumber( config.getKey( 'project/renderer/toneMappingExposure' ) );
  104. toneMappingExposure.setWidth( '30px' ).setMarginLeft( '10px' );
  105. toneMappingExposure.setRange( 0, 10 );
  106. toneMappingExposure.onChange( function () {
  107. config.setKey( 'project/renderer/toneMappingExposure', this.getValue() );
  108. updateTonemapping();
  109. } );
  110. toneMappingRow.add( toneMappingExposure );
  111. rendererPanel.add( toneMappingRow );
  112. //
  113. function updateRenderer() {
  114. createRenderer(
  115. antialiasBoolean.getValue(),
  116. shadowsBoolean.getValue(),
  117. shadowTypeSelect.getValue(),
  118. toneMappingSelect.getValue(),
  119. toneMappingExposure.getValue(),
  120. physicallyCorrectLightsBoolean.getValue()
  121. );
  122. }
  123. function createRenderer( antialias, shadows, shadowType, toneMapping, toneMappingExposure, physicallyCorrectLights ) {
  124. var parameters = { antialias: antialias };
  125. if ( currentRenderer !== null ) {
  126. currentRenderer.dispose();
  127. currentPmremGenerator.dispose();
  128. }
  129. currentRenderer = new THREE.WebGLRenderer( parameters );
  130. currentPmremGenerator = new THREE.PMREMGenerator( currentRenderer );
  131. currentPmremGenerator.compileCubemapShader();
  132. currentPmremGenerator.compileEquirectangularShader();
  133. if ( shadows ) {
  134. currentRenderer.shadowMap.enabled = true;
  135. currentRenderer.shadowMap.type = parseFloat( shadowType );
  136. }
  137. currentRenderer.toneMapping = parseFloat( toneMapping );
  138. currentRenderer.toneMappingExposure = toneMappingExposure;
  139. currentRenderer.physicallyCorrectLights = physicallyCorrectLights;
  140. signals.rendererChanged.dispatch( currentRenderer, currentPmremGenerator );
  141. }
  142. function updateTonemapping() {
  143. currentRenderer.toneMappingExposure = toneMappingExposure.getValue();
  144. signals.rendererUpdated.dispatch();
  145. }
  146. createRenderer(
  147. config.getKey( 'project/renderer/antialias' ),
  148. config.getKey( 'project/renderer/shadows' ),
  149. config.getKey( 'project/renderer/shadowType' ),
  150. config.getKey( 'project/renderer/toneMapping' ),
  151. config.getKey( 'project/renderer/toneMappingExposure' ),
  152. config.getKey( 'project/renderer/physicallyCorrectLights' )
  153. );
  154. // Materials
  155. var materials = new UIPanel();
  156. var headerRow = new UIRow();
  157. headerRow.add( new UIText( strings.getKey( 'sidebar/project/materials' ).toUpperCase() ) );
  158. materials.add( headerRow );
  159. var listbox = new UIListbox();
  160. materials.add( listbox );
  161. var buttonsRow = new UIRow();
  162. buttonsRow.setPadding( '10px 0px' );
  163. materials.add( buttonsRow );
  164. /*
  165. var addButton = new UI.Button().setLabel( 'Add' ).setMarginRight( '5px' );
  166. addButton.onClick( function () {
  167. editor.addMaterial( new THREE.MeshStandardMaterial() );
  168. } );
  169. buttonsRow.add( addButton );
  170. */
  171. var assignMaterial = new UIButton().setLabel( strings.getKey( 'sidebar/project/Assign' ) ).setMargin( '0px 5px' );
  172. assignMaterial.onClick( function () {
  173. var selectedObject = editor.selected;
  174. if ( selectedObject !== null ) {
  175. var oldMaterial = selectedObject.material;
  176. // only assing materials to objects with a material property (e.g. avoid assigning material to THREE.Group)
  177. if ( oldMaterial !== undefined ) {
  178. var material = editor.getMaterialById( parseInt( listbox.getValue() ) );
  179. if ( material !== undefined ) {
  180. editor.removeMaterial( oldMaterial );
  181. editor.execute( new SetMaterialCommand( editor, selectedObject, material ) );
  182. editor.addMaterial( material );
  183. }
  184. }
  185. }
  186. } );
  187. buttonsRow.add( assignMaterial );
  188. container.add( materials );
  189. // events
  190. signals.objectSelected.add( function ( object ) {
  191. if ( object !== null ) {
  192. var index = Object.values( editor.materials ).indexOf( object.material );
  193. listbox.selectIndex( index );
  194. }
  195. } );
  196. signals.materialAdded.add( refreshMaterialBrowserUI );
  197. signals.materialChanged.add( refreshMaterialBrowserUI );
  198. signals.materialRemoved.add( refreshMaterialBrowserUI );
  199. function refreshMaterialBrowserUI() {
  200. listbox.setItems( Object.values( editor.materials ) );
  201. }
  202. return container;
  203. }
  204. export { SidebarProject };