Editor: Added equirect option to environment (#22010)

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() {

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;
 
 		}