Merge pull request #18494 from Mugen87/dev19

Editor: Added CubeMap support for Scene.background.
mrdoob · Jan 28, 2020 · 03cad1e · 03cad1e
2 parents e03466e + 1a0dfba
commit 03cad1e
Show file tree

Hide file tree

Showing 3 changed files with 176 additions and 5 deletions.
diff --git a/editor/js/Sidebar.Scene.js b/editor/js/Sidebar.Scene.js
@@ -3,7 +3,7 @@
  */
 
 import { UIPanel, UIBreak, UIRow, UIColor, UISelect, UIText, UINumber } from './libs/ui.js';
-import { UIOutliner, UITexture } from './libs/ui.three.js';
+import { UIOutliner, UITexture, UICubeTexture } from './libs/ui.three.js';
 
 var SidebarScene = function ( editor ) {
 
@@ -118,7 +118,8 @@ var SidebarScene = function ( editor ) {
 		signals.sceneBackgroundChanged.dispatch(
 			backgroundType.getValue(),
 			backgroundColor.getHexValue(),
-			backgroundTexture.getValue()
+			backgroundTexture.getValue(),
+			backgroundCubeTexture.getValue()
 		);
 
 	}
@@ -129,7 +130,8 @@ var SidebarScene = function ( editor ) {
 
 		'None': 'None',
 		'Color': 'Color',
-		'Texture': 'Texture'
+		'Texture': 'Texture',
+		'CubeTexture': 'CubeTexture'
 
 	} ).setWidth( '150px' );
 	backgroundType.onChange( function () {
@@ -168,12 +170,24 @@ var SidebarScene = function ( editor ) {
 
 	//
 
+	var cubeTextureRow = new UIRow();
+	cubeTextureRow.setDisplay( 'none' );
+	cubeTextureRow.setMarginLeft( '90px' );
+
+	var backgroundCubeTexture = new UICubeTexture().onChange( onBackgroundChanged );
+	cubeTextureRow.add( backgroundCubeTexture );
+
+	container.add( cubeTextureRow );
+
+	//
+
 	function refreshBackgroundUI() {
 
 		var type = backgroundType.getValue();
 
 		colorRow.setDisplay( type === 'Color' ? '' : 'none' );
 		textureRow.setDisplay( type === 'Texture' ? '' : 'none' );
+		cubeTextureRow.setDisplay( type === 'CubeTexture' ? '' : 'none' );
 
 	}
 
@@ -280,11 +294,19 @@ var SidebarScene = function ( editor ) {
 				backgroundType.setValue( "Color" );
 				backgroundColor.setHexValue( scene.background.getHex() );
 				backgroundTexture.setValue( null );
+				backgroundCubeTexture.setValue( null );
 
 			} else if ( scene.background.isTexture ) {
 
 				backgroundType.setValue( "Texture" );
 				backgroundTexture.setValue( scene.background );
+				backgroundCubeTexture.setValue( null );
+
+			} else if ( scene.background.isCubeTexture ) {
+
+				backgroundType.setValue( "CubeTexture" );
+				backgroundCubeTexture.setValue( scene.background );
+				backgroundTexture.setValue( null );
 
 			}
 

diff --git a/editor/js/Viewport.js b/editor/js/Viewport.js
@@ -467,7 +467,7 @@ var Viewport = function ( editor ) {
 
 	var currentBackgroundType = null;
 
-	signals.sceneBackgroundChanged.add( function ( backgroundType, backgroundColor, backgroundTexture ) {
+	signals.sceneBackgroundChanged.add( function ( backgroundType, backgroundColor, backgroundTexture, backgroundCubeTexture ) {
 
 		if ( currentBackgroundType !== backgroundType ) {
 
@@ -492,6 +492,16 @@ var Viewport = function ( editor ) {
 
 			scene.background = backgroundTexture;
 
+		} else if ( backgroundType === 'CubeTexture' ) {
+
+			scene.background = backgroundCubeTexture;
+
+		}
+
+		if ( scene.background !== null && ( scene.background.isTexture || scene.background.isCubeTexture ) ) {
+
+			scene.background.encoding = THREE.sRGBEncoding;
+
 		}
 
 		render();

diff --git a/editor/js/libs/ui.three.js b/editor/js/libs/ui.three.js
@@ -186,6 +186,145 @@ UITexture.prototype.onChange = function ( callback ) {
 
 };
 
+// UICubeTexture
+
+var UICubeTexture = function () {
+
+	UIElement.call( this );
+
+	var container = new UIDiv();
+
+	this.cubeTexture = null;
+	this.onChangeCallback = null;
+	this.dom = container.dom;
+
+	this.textures = [];
+
+	var scope = this;
+
+	var pRow = new UIRow();
+	var nRow = new UIRow();
+
+	pRow.add( new UIText( 'P:' ).setWidth( '35px' ) );
+	nRow.add( new UIText( 'N:' ).setWidth( '35px' ) );
+
+	var posXTexture = new UITexture().onChange( onTextureChanged );
+	var negXTexture = new UITexture().onChange( onTextureChanged );
+	var posYTexture = new UITexture().onChange( onTextureChanged );
+	var negYTexture = new UITexture().onChange( onTextureChanged );
+	var posZTexture = new UITexture().onChange( onTextureChanged );
+	var negZTexture = new UITexture().onChange( onTextureChanged );
+
+	this.textures.push( posXTexture, negXTexture, posYTexture, negYTexture, posZTexture, negZTexture );
+
+	pRow.add( posXTexture );
+	pRow.add( posYTexture );
+	pRow.add( posZTexture );
+
+	nRow.add( negXTexture );
+	nRow.add( negYTexture );
+	nRow.add( negZTexture );
+
+	container.add( pRow, nRow );
+
+	function onTextureChanged() {
+
+		var images = [];
+
+		for ( var i = 0; i < scope.textures.length; i ++ ) {
+
+			var texture = scope.textures[ i ].getValue();
+
+			if ( texture !== null ) {
+
+				images.push( texture.image );
+
+			}
+
+		}
+
+		if ( images.length === 6 ) {
+
+			var cubeTexture = new THREE.CubeTexture( images );
+			cubeTexture.needsUpdate = true;
+
+			scope.cubeTexture = cubeTexture;
+
+			if ( scope.onChangeCallback ) scope.onChangeCallback( cubeTexture );
+
+		}
+
+	}
+
+};
+
+UICubeTexture.prototype = Object.create( UIElement.prototype );
+UICubeTexture.prototype.constructor = UICubeTexture;
+
+UICubeTexture.prototype.setEncoding = function ( encoding ) {
+
+	var cubeTexture = this.getValue();
+	if ( cubeTexture !== null ) {
+
+		cubeTexture.encoding = encoding;
+
+	}
+
+	return this;
+
+};
+
+UICubeTexture.prototype.getValue = function () {
+
+	return this.cubeTexture;
+
+};
+
+UICubeTexture.prototype.setValue = function ( cubeTexture ) {
+
+	this.cubeTexture = cubeTexture;
+
+	if ( cubeTexture !== null ) {
+
+		var images = cubeTexture.image;
+
+		if ( Array.isArray( images ) === true && images.length === 6 ) {
+
+			for ( var i = 0; i < images.length; i ++ ) {
+
+				var image = images[ i ];
+
+				var texture = new THREE.Texture( image );
+				this.textures[ i ].setValue( texture );
+
+			}
+
+		}
+
+	} else {
+
+		var textures = this.textures;
+
+		for ( var i = 0; i < textures.length; i ++ ) {
+
+			textures[ i ].setValue( null );
+
+		}
+
+	}
+
+	return this;
+
+};
+
+UICubeTexture.prototype.onChange = function ( callback ) {
+
+	this.onChangeCallback = callback;
+
+	return this;
+
+};
+
 // UIOutliner
 
 var UIOutliner = function ( editor ) {
@@ -744,4 +883,4 @@ UIBoolean.prototype.setValue = function ( value ) {
 
 };
 
-export { UITexture, UIOutliner, UIPoints, UIPoints2, UIPoints3, UIBoolean };
+export { UITexture, UICubeTexture, UIOutliner, UIPoints, UIPoints2, UIPoints3, UIBoolean };