Merge pull request #18471 from Mugen87/dev9

Editor: Add support for background texture.

editor/js/Editor.js

@@ -124,7 +124,8 @@ Editor.prototype = {
 		this.scene.uuid = scene.uuid;
 		this.scene.name = scene.name;
 
-		if ( scene.background !== null ) this.scene.background = scene.background.clone();
+		this.scene.background = ( scene.background !== null ) ? scene.background.clone() : null;
+
 		if ( scene.fog !== null ) this.scene.fog = scene.fog.clone();
 
 		this.scene.userData = JSON.parse( JSON.stringify( scene.userData ) );
@@ -609,7 +610,7 @@ Editor.prototype = {
 		this.camera.copy( this.DEFAULT_CAMERA );
 		this.scene.name = "Scene";
 		this.scene.userData = {};
-		this.scene.background.setHex( 0xaaaaaa );
+		this.scene.background = new THREE.Color( 0xaaaaaa );
 		this.scene.fog = null;
 
 		var objects = this.scene.children;

editor/js/Sidebar.Scene.js

@@ -3,7 +3,7 @@
  */
 
 import { UIPanel, UIBreak, UIRow, UIColor, UISelect, UIText, UINumber } from './libs/ui.js';
-import { UIOutliner } from './libs/ui.three.js';
+import { UIOutliner, UITexture } from './libs/ui.three.js';
 
 var SidebarScene = function ( editor ) {
 
@@ -115,19 +115,68 @@ var SidebarScene = function ( editor ) {
 
 	function onBackgroundChanged() {
 
-		signals.sceneBackgroundChanged.dispatch( backgroundColor.getHexValue() );
+		signals.sceneBackgroundChanged.dispatch(
+			backgroundType.getValue(),
+			backgroundColor.getHexValue(),
+			backgroundTexture.getValue()
+		);
 
 	}
 
 	var backgroundRow = new UIRow();
 
-	var backgroundColor = new UIColor().setValue( '#aaaaaa' ).onChange( onBackgroundChanged );
+	var backgroundType = new UISelect().setOptions( {
+
+		'None': 'None',
+		'Color': 'Color',
+		'Texture': 'Texture'
+
+	} ).setWidth( '150px' );
+	backgroundType.onChange( function () {
+
+		onBackgroundChanged();
+		refreshBackgroundUI();
+
+	} );
+	backgroundType.setValue( 'Color' );
 
 	backgroundRow.add( new UIText( strings.getKey( 'sidebar/scene/background' ) ).setWidth( '90px' ) );
-	backgroundRow.add( backgroundColor );
+	backgroundRow.add( backgroundType );
 
 	container.add( backgroundRow );
 
+	//
+
+	var colorRow = new UIRow();
+	colorRow.setMarginLeft( '90px' );
+
+	var backgroundColor = new UIColor().setValue( '#aaaaaa' ).onChange( onBackgroundChanged );
+	colorRow.add( backgroundColor );
+
+	container.add( colorRow );
+
+	//
+
+	var textureRow = new UIRow();
+	textureRow.setDisplay( 'none' );
+	textureRow.setMarginLeft( '90px' );
+
+	var backgroundTexture = new UITexture().onChange( onBackgroundChanged );
+	textureRow.add( backgroundTexture );
+
+	container.add( textureRow );
+
+	//
+
+	function refreshBackgroundUI() {
+
+		var type = backgroundType.getValue();
+
+		colorRow.setDisplay( type === 'Color' ? '' : 'none' );
+		textureRow.setDisplay( type === 'Texture' ? '' : 'none' );
+
+	}
+
 	// fog
 
 	function onFogChanged() {
@@ -226,7 +275,23 @@ var SidebarScene = function ( editor ) {
 
 		if ( scene.background ) {
 
-			backgroundColor.setHexValue( scene.background.getHex() );
+			if ( scene.background.isColor ) {
+
+				backgroundType.setValue( "Color" );
+				backgroundColor.setHexValue( scene.background.getHex() );
+				backgroundTexture.setValue( null );
+
+			} else if ( scene.background.isTexture ) {
+
+				backgroundType.setValue( "Texture" );
+				backgroundTexture.setValue( scene.background );
+
+			}
+
+		} else {
+
+			backgroundType.setValue( "None" );
+			backgroundTexture.setValue( null );
 
 		}
 
@@ -253,6 +318,7 @@ var SidebarScene = function ( editor ) {
 
 		}
 
+		refreshBackgroundUI();
 		refreshFogUI();
 
 	}

editor/js/Viewport.js

@@ -294,6 +294,8 @@ var Viewport = function ( editor ) {
 	signals.editorCleared.add( function () {
 
 		controls.center.set( 0, 0, 0 );
+		currentBackgroundType = null;
+		currentFogType = null;
 		render();
 
 	} );
@@ -461,16 +463,43 @@ var Viewport = function ( editor ) {
 
 	} );
 
-	// fog
+	// background
+
+	var currentBackgroundType = null;
+
+	signals.sceneBackgroundChanged.add( function ( backgroundType, backgroundColor, backgroundTexture ) {
+
+		if ( currentBackgroundType !== backgroundType ) {
+
+			switch ( backgroundType ) {
 
-	signals.sceneBackgroundChanged.add( function ( backgroundColor ) {
+				case 'None':
+					scene.background = null;
+					break;
+				case 'Color':
+					scene.background = new THREE.Color();
+					break;
 
-		scene.background.setHex( backgroundColor );
+			}
+
+		}
+
+		if ( backgroundType === 'Color' ) {
+
+			scene.background.set( backgroundColor );
+
+		} else if ( backgroundType === 'Texture' ) {
+
+			scene.background = backgroundTexture;
+
+		}
 
 		render();
 
 	} );
 
+	// fog
+
 	var currentFogType = null;
 
 	signals.sceneFogChanged.add( function ( fogType, fogColor, fogNear, fogFar, fogDensity ) {