diff --git a/editor/js/Sidebar.Scene.js b/editor/js/Sidebar.Scene.js index 5ab3fa5132b47c79c2528cbc4291889f364a1347..6854d72812811a2c27989be04a7102f330489dbe 100644 --- a/editor/js/Sidebar.Scene.js +++ b/editor/js/Sidebar.Scene.js @@ -150,18 +150,6 @@ function SidebarScene( editor ) { // background - function onBackgroundChanged() { - - signals.sceneBackgroundChanged.dispatch( - backgroundType.getValue(), - backgroundColor.getHexValue(), - backgroundTexture.getValue(), - backgroundEquirectangularTexture.getValue(), - environmentType.getValue() - ); - - } - var backgroundRow = new UIRow(); var backgroundType = new UISelect().setOptions( { @@ -196,7 +184,16 @@ function SidebarScene( editor ) { container.add( backgroundRow ); - // + function onBackgroundChanged() { + + signals.sceneBackgroundChanged.dispatch( + backgroundType.getValue(), + backgroundColor.getHexValue(), + backgroundTexture.getValue(), + backgroundEquirectangularTexture.getValue() + ); + + } function refreshBackgroundUI() { @@ -216,22 +213,45 @@ function SidebarScene( editor ) { var environmentType = new UISelect().setOptions( { 'None': '', - 'Background': 'Background', + 'Equirectangular': 'Equirect', 'ModelViewer': 'ModelViewer' } ).setWidth( '150px' ); environmentType.setValue( 'None' ); environmentType.onChange( function () { - signals.sceneEnvironmentChanged.dispatch( environmentType.getValue() ); + onEnvironmentChanged(); + refreshEnvironmentUI(); } ); environmentRow.add( new UIText( strings.getKey( 'sidebar/scene/environment' ) ).setWidth( '90px' ) ); environmentRow.add( environmentType ); + var environmentEquirectangularTexture = new UITexture().setMarginLeft( '8px' ).onChange( onEnvironmentChanged ); + environmentEquirectangularTexture.setDisplay( 'none' ); + environmentRow.add( environmentEquirectangularTexture ); + container.add( environmentRow ); + function onEnvironmentChanged() { + + signals.sceneEnvironmentChanged.dispatch( + environmentType.getValue(), + environmentEquirectangularTexture.getValue() + ); + + } + + function refreshEnvironmentUI() { + + var type = environmentType.getValue(); + + environmentType.setWidth( type !== 'Equirectangular' ? '150px' : '110px' ); + environmentEquirectangularTexture.setDisplay( type === 'Equirectangular' ? '' : 'none' ); + + } + // fog function onFogChanged() { diff --git a/editor/js/Viewport.js b/editor/js/Viewport.js index 626e435442a9ee31b27d0a680fbbfb4fe67936d6..072a4f80891de9d064fc86d12cf3bee092825df5 100644 --- a/editor/js/Viewport.js +++ b/editor/js/Viewport.js @@ -32,7 +32,6 @@ function Viewport( editor ) { var renderer = null; var pmremGenerator = null; - var pmremTexture = null; var camera = editor.camera; var scene = editor.scene; @@ -354,7 +353,6 @@ function Viewport( editor ) { renderer.setAnimationLoop( null ); renderer.dispose(); pmremGenerator.dispose(); - pmremTexture = null; container.dom.removeChild( renderer.domElement ); @@ -537,9 +535,7 @@ function Viewport( editor ) { // background - signals.sceneBackgroundChanged.add( function ( backgroundType, backgroundColor, backgroundTexture, backgroundEquirectangularTexture, environmentType ) { - - pmremTexture = null; + signals.sceneBackgroundChanged.add( function ( backgroundType, backgroundColor, backgroundTexture, backgroundEquirectangularTexture ) { switch ( backgroundType ) { @@ -569,9 +565,7 @@ function Viewport( editor ) { if ( backgroundEquirectangularTexture ) { - pmremTexture = pmremGenerator.fromEquirectangular( backgroundEquirectangularTexture ).texture; - - var renderTarget = new THREE.WebGLCubeRenderTarget( 512 ); + var renderTarget = new THREE.WebGLCubeRenderTarget( backgroundEquirectangularTexture.image.width ); renderTarget.fromEquirectangularTexture( renderer, backgroundEquirectangularTexture ); renderTarget.toJSON = function () { return null }; // TODO Remove hack @@ -583,30 +577,38 @@ function Viewport( editor ) { } - if ( environmentType === 'Background' ) { - - scene.environment = pmremTexture; - - } - render(); } ); // environment - signals.sceneEnvironmentChanged.add( function ( environmentType ) { + signals.sceneEnvironmentChanged.add( function ( environmentType, environmentEquirectangularTexture ) { switch ( environmentType ) { case 'None': + scene.environment = null; + break; - case 'Background': - scene.environment = pmremTexture; + + case 'Equirectangular': + + scene.environment = null; + + if ( environmentEquirectangularTexture ) { + + scene.environment = pmremGenerator.fromEquirectangular( environmentEquirectangularTexture ).texture; + + } + break; + case 'ModelViewer': + scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture; + break; }