Editor: Store background in IndexedDB (#22023)

* ObjectLoader: Clean up

* Object3D: Clean up

* Editor: Store background in IndexedDB

* Editor: Simplified background handling.

Author: mrdoob

editor/js/Editor.js

@@ -131,7 +131,7 @@ Editor.prototype = {
 		this.scene.uuid = scene.uuid;
 		this.scene.name = scene.name;
 
-		this.scene.background = ( scene.background !== null ) ? scene.background.clone() : null;
+		this.scene.background = scene.background;
 
 		if ( scene.fog !== null ) this.scene.fog = scene.fog.clone();
 

editor/js/Sidebar.Scene.js

@@ -1,3 +1,5 @@
+import * as THREE from '../../build/three.module.js';
+
 import { UIPanel, UIBreak, UIRow, UIColor, UISelect, UIText, UINumber } from './libs/ui.js';
 import { UIOutliner, UITexture } from './libs/ui.three.js';
 
@@ -166,7 +168,6 @@ function SidebarScene( editor ) {
 		refreshBackgroundUI();
 
 	} );
-	backgroundType.setValue( 'Color' );
 
 	backgroundRow.add( new UIText( strings.getKey( 'sidebar/scene/background' ) ).setWidth( '90px' ) );
 	backgroundRow.add( backgroundType );
@@ -376,18 +377,26 @@ function SidebarScene( editor ) {
 
 				backgroundType.setValue( 'Color' );
 				backgroundColor.setHexValue( scene.background.getHex() );
-				backgroundTexture.setValue( null );
-				backgroundEquirectangularTexture.setValue( null );
 
-			}
+			} else if ( scene.background.isTexture ) {
+
+				if ( scene.background.mapping === THREE.EquirectangularReflectionMapping ) {
+
+					backgroundType.setValue( 'Equirectangular' );
+					backgroundEquirectangularTexture.setValue( scene.background );
+
+				} else {
 
-			// TODO: Add Texture/EquirectangularTexture support
+					backgroundType.setValue( 'Texture' );
+					backgroundTexture.setValue( scene.background );
+
+				}
+
+			}
 
 		} else {
 
 			backgroundType.setValue( 'None' );
-			backgroundTexture.setValue( null );
-			backgroundEquirectangularTexture.setValue( null );
 
 		}
 

editor/js/Viewport.js

@@ -565,11 +565,8 @@ function Viewport( editor ) {
 
 				if ( backgroundEquirectangularTexture ) {
 
-					var renderTarget = new THREE.WebGLCubeRenderTarget( backgroundEquirectangularTexture.image.width );
-					renderTarget.fromEquirectangularTexture( renderer, backgroundEquirectangularTexture );
-					renderTarget.toJSON = function () { return null }; // TODO Remove hack
-
-					scene.background = renderTarget.texture;
+					backgroundEquirectangularTexture.mapping = THREE.EquirectangularReflectionMapping;
+					scene.background = backgroundEquirectangularTexture;
 
 				}
 

src/core/Object3D.js

@@ -701,21 +701,27 @@ class Object3D extends EventDispatcher {
 
 		if ( this.isScene ) {
 
-			if ( this.background && this.background.isColor ) {
+			if ( this.background ) {
 
-				object.background = this.background.toJSON();
+				if ( this.background.isColor ) {
 
-			} else if ( this.background && this.background.isTexture ) {
+					object.background = this.background.toJSON();
 
-				object.background = this.background.toJSON( meta ).uuid;
+				} else if ( this.background.isTexture ) {
+
+					object.background = this.background.toJSON( meta ).uuid;
+
+				}
 
 			}
 
-			if ( this.environment && this.environment.isTexture ) object.environment = this.environment.toJSON( meta ).uuid;
+			if ( this.environment && this.environment.isTexture ) {
 
-		}
+				object.environment = this.environment.toJSON( meta ).uuid;
+
+			}
 
-		if ( this.isMesh || this.isLine || this.isPoints ) {
+		} else if ( this.isMesh || this.isLine || this.isPoints ) {
 
 			object.geometry = serialize( meta.geometries, this.geometry );
 

src/loaders/ObjectLoader.js

@@ -128,7 +128,7 @@ class ObjectLoader extends Loader {
 		const textures = this.parseTextures( json.textures, images );
 		const materials = this.parseMaterials( json.materials, textures );
 
-		const object = this.parseObject( json.object, geometries, materials, animations, textures );
+		const object = this.parseObject( json.object, geometries, materials, textures, animations );
 		const skeletons = this.parseSkeletons( json.skeletons, object );
 
 		this.bindSkeletons( object, skeletons );
@@ -784,7 +784,7 @@ class ObjectLoader extends Loader {
 
 	}
 
-	parseObject( data, geometries, materials, animations, textures ) {
+	parseObject( data, geometries, materials, textures, animations ) {
 
 		let object;
 
@@ -1087,7 +1087,7 @@ class ObjectLoader extends Loader {
 
 			for ( let i = 0; i < children.length; i ++ ) {
 
-				object.add( this.parseObject( children[ i ], geometries, materials, animations, textures ) );
+				object.add( this.parseObject( children[ i ], geometries, materials, textures, animations ) );
 
 			}