123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165 |
- import * as THREE from '../../build/three.module.js';
- import { UINumber, UIPanel, UIRow, UISelect, UIText } from './libs/ui.js';
- import { UIBoolean } from './libs/ui.three.js';
- function SidebarProjectRenderer( editor ) {
- var config = editor.config;
- var signals = editor.signals;
- var strings = editor.strings;
- var currentRenderer = null;
- var container = new UIPanel();
- var headerRow = new UIRow();
- headerRow.add( new UIText( strings.getKey( 'sidebar/project/renderer' ).toUpperCase() ) );
- container.add( headerRow );
- // Antialias
- var antialiasRow = new UIRow();
- container.add( antialiasRow );
- antialiasRow.add( new UIText( strings.getKey( 'sidebar/project/antialias' ) ).setWidth( '90px' ) );
- var antialiasBoolean = new UIBoolean( config.getKey( 'project/renderer/antialias' ) ).onChange( createRenderer );
- antialiasRow.add( antialiasBoolean );
- // Physically Correct lights
- var physicallyCorrectLightsRow = new UIRow();
- container.add( physicallyCorrectLightsRow );
- physicallyCorrectLightsRow.add( new UIText( strings.getKey( 'sidebar/project/physicallyCorrectLights' ) ).setWidth( '90px' ) );
- var physicallyCorrectLightsBoolean = new UIBoolean( config.getKey( 'project/renderer/physicallyCorrectLights' ) ).onChange( function () {
- currentRenderer.physicallyCorrectLights = this.getValue();
- signals.rendererUpdated.dispatch();
- } );
- physicallyCorrectLightsRow.add( physicallyCorrectLightsBoolean );
- // Shadows
- var shadowsRow = new UIRow();
- container.add( shadowsRow );
- shadowsRow.add( new UIText( strings.getKey( 'sidebar/project/shadows' ) ).setWidth( '90px' ) );
- var shadowsBoolean = new UIBoolean( config.getKey( 'project/renderer/shadows' ) ).onChange( updateShadows );
- shadowsRow.add( shadowsBoolean );
- var shadowTypeSelect = new UISelect().setOptions( {
- 0: 'Basic',
- 1: 'PCF',
- 2: 'PCF Soft',
- // 3: 'VSM'
- } ).setWidth( '125px' ).onChange( updateShadows );
- shadowTypeSelect.setValue( config.getKey( 'project/renderer/shadowType' ) );
- shadowsRow.add( shadowTypeSelect );
- function updateShadows() {
- currentRenderer.shadowMap.enabled = shadowsBoolean.getValue();
- currentRenderer.shadowMap.type = parseFloat( shadowTypeSelect.getValue() );
- signals.rendererUpdated.dispatch();
- }
- // Tonemapping
- var toneMappingRow = new UIRow();
- container.add( toneMappingRow );
- toneMappingRow.add( new UIText( strings.getKey( 'sidebar/project/toneMapping' ) ).setWidth( '90px' ) );
- var toneMappingSelect = new UISelect().setOptions( {
- 0: 'No',
- 1: 'Linear',
- 2: 'Reinhard',
- 3: 'Cineon',
- 4: 'ACESFilmic'
- } ).setWidth( '120px' ).onChange( updateToneMapping );
- toneMappingSelect.setValue( config.getKey( 'project/renderer/toneMapping' ) );
- toneMappingRow.add( toneMappingSelect );
- var toneMappingExposure = new UINumber( config.getKey( 'project/renderer/toneMappingExposure' ) );
- toneMappingExposure.setDisplay( toneMappingSelect.getValue() === '0' ? 'none' : '' );
- toneMappingExposure.setWidth( '30px' ).setMarginLeft( '10px' );
- toneMappingExposure.setRange( 0, 10 );
- toneMappingExposure.onChange( updateToneMapping );
- toneMappingRow.add( toneMappingExposure );
- function updateToneMapping() {
- toneMappingExposure.setDisplay( toneMappingSelect.getValue() === '0' ? 'none' : '' );
- currentRenderer.toneMapping = parseFloat( toneMappingSelect.getValue() );
- currentRenderer.toneMappingExposure = toneMappingExposure.getValue();
- signals.rendererUpdated.dispatch();
- }
- //
- function createRenderer() {
- currentRenderer = new THREE.WebGLRenderer( { antialias: antialiasBoolean.getValue() } );
- currentRenderer.outputEncoding = THREE.sRGBEncoding;
- currentRenderer.physicallyCorrectLights = physicallyCorrectLightsBoolean.getValue();
- currentRenderer.shadowMap.enabled = shadowsBoolean.getValue();
- currentRenderer.shadowMap.type = parseFloat( shadowTypeSelect.getValue() );
- currentRenderer.toneMapping = parseFloat( toneMappingSelect.getValue() );
- currentRenderer.toneMappingExposure = toneMappingExposure.getValue();
- signals.rendererCreated.dispatch( currentRenderer );
- signals.rendererUpdated.dispatch();
- }
- createRenderer();
- // Signals
- signals.editorCleared.add( function () {
- currentRenderer.physicallyCorrectLights = false;
- currentRenderer.shadowMap.enabled = true;
- currentRenderer.shadowMap.type = THREE.PCFShadowMap;
- currentRenderer.toneMapping = THREE.NoToneMapping;
- currentRenderer.toneMappingExposure = 1;
- physicallyCorrectLightsBoolean.setValue( currentRenderer.physicallyCorrectLights );
- shadowsBoolean.setValue( currentRenderer.shadowMap.enabled );
- shadowTypeSelect.setValue( currentRenderer.shadowMap.type );
- toneMappingSelect.setValue( currentRenderer.toneMapping );
- toneMappingExposure.setValue( currentRenderer.toneMappingExposure );
- toneMappingExposure.setDisplay( currentRenderer.toneMapping === 0 ? 'none' : '' );
- signals.rendererUpdated.dispatch();
- } );
- signals.rendererUpdated.add( function () {
- config.setKey(
- 'project/renderer/antialias', antialiasBoolean.getValue(),
- 'project/renderer/physicallyCorrectLights', physicallyCorrectLightsBoolean.getValue(),
- 'project/renderer/shadows', shadowsBoolean.getValue(),
- 'project/renderer/shadowType', parseFloat( shadowTypeSelect.getValue() ),
- 'project/renderer/toneMapping', parseFloat( toneMappingSelect.getValue() ),
- 'project/renderer/toneMappingExposure', toneMappingExposure.getValue()
- );
- } );
- return container;
- }
- export { SidebarProjectRenderer };
|