Editor: Simplify environment handling. (#32757)

editor/js/Editor.js

@@ -84,7 +84,6 @@ function Editor() {
 
 		showHelpersChanged: new Signal(),
 		refreshSidebarObject3D: new Signal(),
-		refreshSidebarEnvironment: new Signal(),
 		historyChanged: new Signal(),
 
 		viewportCameraChanged: new Signal(),
@@ -112,6 +111,9 @@ function Editor() {
 	this.sceneHelpers = new THREE.Scene();
 	this.sceneHelpers.add( new THREE.HemisphereLight( 0xffffff, 0x888888, 2 ) );
 
+	this.backgroundType = 'Default';
+	this.environmentType = 'Default';
+
 	this.object = {};
 	this.geometries = {};
 	this.materials = {};
@@ -162,6 +164,8 @@ Editor.prototype = {
 		this.signals.sceneGraphChanged.active = true;
 		this.signals.sceneGraphChanged.dispatch();
 
+		this.signals.sceneEnvironmentChanged.dispatch( this.environmentType, scene.environment );
+
 	},
 
 	//
@@ -652,6 +656,9 @@ Editor.prototype = {
 
 		this.deselect();
 
+		this.backgroundType = 'Default';
+		this.environmentType = 'Default';
+
 		this.signals.editorCleared.dispatch();
 
 	},
@@ -684,17 +691,12 @@ Editor.prototype = {
 		this.history.fromJSON( json.history );
 		this.scripts = json.scripts;
 
-		this.setScene( await loader.parseAsync( json.scene ) );
+		const scene = await loader.parseAsync( json.scene );
 
-		if ( json.environment == null ||
-			 json.environment === 'Default' ||
-			 json.environment === 'Room' /* COMPAT */ ||
-			 json.environment === 'ModelViewer' /* COMPAT */ ) {
+		this.backgroundType = json.backgroundType || 'Default';
+		this.environmentType = json.environmentType || 'Default';
 
-			this.signals.sceneEnvironmentChanged.dispatch( 'Default' );
-			this.signals.refreshSidebarEnvironment.dispatch();
-
-		}
+		this.setScene( scene );
 
 	},
 
@@ -717,18 +719,6 @@ Editor.prototype = {
 
 		}
 
-		// honor neutral environment
-
-		let environment = null;
-
-		if ( this.scene.environment !== null && this.scene.environment.isRenderTargetTexture === true ) {
-
-			environment = 'Default';
-
-		}
-
-		//
-
 		return {
 
 			metadata: {},
@@ -743,7 +733,8 @@ Editor.prototype = {
 			scene: this.scene.toJSON(),
 			scripts: this.scripts,
 			history: this.history.toJSON(),
-			environment: environment
+			backgroundType: this.backgroundType,
+			environmentType: this.environmentType
 
 		};
 

editor/js/Sidebar.Scene.js

@@ -259,7 +259,6 @@ function SidebarScene( editor ) {
 	const environmentType = new UISelect().setOptions( {
 
 		'Default': 'Default',
-		'Background': 'Background',
 		'Equirectangular': 'Equirect',
 		'None': 'None'
 
@@ -417,62 +416,41 @@ function SidebarScene( editor ) {
 
 		}
 
-		if ( scene.background ) {
+		backgroundType.setValue( editor.backgroundType );
 
-			if ( scene.background.isColor ) {
+		switch ( editor.backgroundType ) {
 
-				backgroundType.setValue( 'Color' );
+			case 'Color':
 				backgroundColor.setHexValue( scene.background.getHex() );
+				break;
 
-			} else if ( scene.background.isTexture ) {
-
-				if ( scene.background.mapping === THREE.EquirectangularReflectionMapping ) {
-
-					backgroundType.setValue( 'Equirectangular' );
-					backgroundEquirectangularTexture.setValue( scene.background );
-					backgroundBlurriness.setValue( scene.backgroundBlurriness );
-					backgroundIntensity.setValue( scene.backgroundIntensity );
-
-				} else {
-
-					backgroundType.setValue( 'Texture' );
-					backgroundTexture.setValue( scene.background );
-
-				}
-
+			case 'Texture':
+				backgroundTexture.setValue( scene.background );
 				backgroundColorSpace.setValue( scene.background.colorSpace );
+				break;
 
-			}
-
-		} else {
+			case 'Equirectangular':
+				backgroundEquirectangularTexture.setValue( scene.background );
+				backgroundBlurriness.setValue( scene.backgroundBlurriness );
+				backgroundIntensity.setValue( scene.backgroundIntensity );
+				backgroundColorSpace.setValue( scene.background.colorSpace );
+				break;
 
-			backgroundType.setValue( 'Default' );
-			backgroundTexture.setValue( null );
-			backgroundEquirectangularTexture.setValue( null );
-			backgroundColorSpace.setValue( THREE.NoColorSpace );
+			default:
+				backgroundTexture.setValue( null );
+				backgroundEquirectangularTexture.setValue( null );
+				backgroundColorSpace.setValue( THREE.NoColorSpace );
 
 		}
 
-		if ( scene.environment ) {
-
-			if ( scene.background && scene.background.isTexture && scene.background.uuid === scene.environment.uuid ) {
-
-				environmentType.setValue( 'Background' );
-
-			} else if ( scene.environment.mapping === THREE.EquirectangularReflectionMapping ) {
+		environmentType.setValue( editor.environmentType );
 
-				environmentType.setValue( 'Equirectangular' );
-				environmentEquirectangularTexture.setValue( scene.environment );
+		if ( editor.environmentType === 'Equirectangular' ) {
 
-			} else if ( scene.environment.isRenderTargetTexture === true ) {
-
-				environmentType.setValue( 'Default' );
-
-			}
+			environmentEquirectangularTexture.setValue( scene.environment );
 
 		} else {
 
-			environmentType.setValue( 'Default' );
 			environmentEquirectangularTexture.setValue( null );
 
 		}
@@ -525,8 +503,6 @@ function SidebarScene( editor ) {
 
 	signals.sceneGraphChanged.add( refreshUI );
 
-	signals.refreshSidebarEnvironment.add( refreshUI );
-
 	signals.objectChanged.add( function ( object ) {
 
 		const options = outliner.options;

editor/js/Viewport.js

@@ -16,6 +16,7 @@ import { SetPositionCommand } from './commands/SetPositionCommand.js';
 import { SetRotationCommand } from './commands/SetRotationCommand.js';
 import { SetScaleCommand } from './commands/SetScaleCommand.js';
 
+import { ColorEnvironment } from 'three/addons/environments/ColorEnvironment.js';
 import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
 import { ViewportPathtracer } from './Viewport.Pathtracer.js';
 
@@ -293,7 +294,8 @@ function Viewport( editor ) {
 		pathtracer.reset();
 
 		initPT();
-		render();
+
+		signals.sceneEnvironmentChanged.dispatch( editor.environmentType );
 
 	} );
 
@@ -499,6 +501,8 @@ function Viewport( editor ) {
 
 	signals.sceneBackgroundChanged.add( function ( backgroundType, backgroundColor, backgroundTexture, backgroundEquirectangularTexture, backgroundColorSpace, backgroundBlurriness, backgroundIntensity, backgroundRotation ) {
 
+		editor.backgroundType = backgroundType;
+
 		scene.background = null;
 
 		switch ( backgroundType ) {
@@ -535,17 +539,15 @@ function Viewport( editor ) {
 					scene.backgroundIntensity = backgroundIntensity;
 					scene.backgroundRotation.y = backgroundRotation * THREE.MathUtils.DEG2RAD;
 
-					if ( useBackgroundAsEnvironment ) {
+				}
 
-						scene.environment = scene.background;
-						scene.environmentRotation.y = backgroundRotation * THREE.MathUtils.DEG2RAD;
+				break;
 
-					}
+		}
 
+		if ( useBackgroundAsEnvironment ) {
 
-				}
-
-				break;
+			signals.sceneEnvironmentChanged.dispatch( editor.environmentType );
 
 		}
 
@@ -560,41 +562,48 @@ function Viewport( editor ) {
 
 	signals.sceneEnvironmentChanged.add( function ( environmentType, environmentEquirectangularTexture ) {
 
+		editor.environmentType = environmentType;
+
 		scene.environment = null;
 
 		useBackgroundAsEnvironment = false;
 
 		switch ( environmentType ) {
 
+			case 'Equirectangular':
 
-			case 'Background':
-
-				useBackgroundAsEnvironment = true;
-
-				if ( scene.background !== null && scene.background.isTexture ) {
+				if ( environmentEquirectangularTexture ) {
 
-					scene.environment = scene.background;
+					scene.environment = environmentEquirectangularTexture;
 					scene.environment.mapping = THREE.EquirectangularReflectionMapping;
-					scene.environmentRotation.y = scene.backgroundRotation.y;
 
 				}
 
 				break;
 
-			case 'Equirectangular':
+			case 'Default':
 
-				if ( environmentEquirectangularTexture ) {
+				useBackgroundAsEnvironment = true;
 
-					scene.environment = environmentEquirectangularTexture;
-					scene.environment.mapping = THREE.EquirectangularReflectionMapping;
+				if ( scene.background !== null ) {
 
-				}
+					if ( scene.background.isColor ) {
 
-				break;
+						scene.environment = pmremGenerator.fromScene( new ColorEnvironment( scene.background ), 0.04 ).texture;
 
-			case 'Default':
+					} else if ( scene.background.isTexture ) {
+
+						scene.environment = scene.background;
+						scene.environment.mapping = THREE.EquirectangularReflectionMapping;
+						scene.environmentRotation.y = scene.backgroundRotation.y;
+
+					}
+
+				} else {
 
-				scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;
+					scene.environment = pmremGenerator.fromScene( new RoomEnvironment(), 0.04 ).texture;
+
+				}
 
 				break;
 

editor/sw.js

@@ -68,6 +68,7 @@ const assets = [
 	'../examples/jsm/interactive/HTMLMesh.js',
 	'../examples/jsm/interactive/InteractiveGroup.js',
 
+	'../examples/jsm/environments/ColorEnvironment.js',
 	'../examples/jsm/environments/RoomEnvironment.js',
 
 	'../examples/jsm/exporters/DRACOExporter.js',
@@ -78,6 +79,7 @@ const assets = [
 	'../examples/jsm/exporters/USDZExporter.js',
 
 	'../examples/jsm/helpers/VertexNormalsHelper.js',
+	'../examples/jsm/helpers/ViewHelper.js',
 
 	'../examples/jsm/utils/BufferGeometryUtils.js',
 

examples/jsm/environments/ColorEnvironment.js

@@ -0,0 +1,59 @@
+import {
+	BackSide,
+	Mesh,
+	MeshBasicMaterial,
+	SphereGeometry,
+	Scene
+} from 'three';
+
+/**
+ * This class represents a scene with a uniform color that can be used as
+ * input for {@link PMREMGenerator#fromScene}. The resulting PMREM represents
+ * uniform ambient lighting and can be used for Image Based Lighting by
+ * assigning it to {@link Scene#environment}.
+ *
+ * ```js
+ * const environment = new ColorEnvironment( 0x00ff00 );
+ * const pmremGenerator = new THREE.PMREMGenerator( renderer );
+ *
+ * const envMap = pmremGenerator.fromScene( environment ).texture;
+ * scene.environment = envMap;
+ * ```
+ *
+ * @augments Scene
+ * @three_import import { ColorEnvironment } from 'three/addons/environments/ColorEnvironment.js';
+ */
+class ColorEnvironment extends Scene {
+
+	/**
+	 * Constructs a new color environment.
+	 *
+	 * @param {number|Color} color - The color of the environment.
+	 */
+	constructor( color = 0xffffff ) {
+
+		super();
+
+		this.name = 'ColorEnvironment';
+
+		const geometry = new SphereGeometry( 1, 16, 16 );
+		const material = new MeshBasicMaterial( { color: color, side: BackSide } );
+
+		this.add( new Mesh( geometry, material ) );
+
+	}
+
+	/**
+	 * Frees internal resources. This method should be called
+	 * when the environment is no longer required.
+	 */
+	dispose() {
+
+		this.children[ 0 ].geometry.dispose();
+		this.children[ 0 ].material.dispose();
+
+	}
+
+}
+
+export { ColorEnvironment };