Editor: Added background rotation support. (#27790)

editor/js/Sidebar.Scene.js

@@ -195,6 +195,9 @@ function SidebarScene( editor ) {
 	const backgroundIntensity = new UINumber( 1 ).setWidth( '40px' ).setRange( 0, Infinity ).onChange( onBackgroundChanged );
 	backgroundEquirectRow.add( backgroundIntensity );
 
+	const backgroundRotation = new UINumber( 0 ).setWidth( '40px' ).setRange( -180, 180 ).setStep( 10 ).setNudge( 0.1 ).setUnit( '°' ).onChange( onBackgroundChanged );
+	backgroundEquirectRow.add( backgroundRotation );
+
 	container.add( backgroundEquirectRow );
 
 	function onBackgroundChanged() {
@@ -205,7 +208,8 @@ function SidebarScene( editor ) {
 			backgroundTexture.getValue(),
 			backgroundEquirectangularTexture.getValue(),
 			backgroundBlurriness.getValue(),
-			backgroundIntensity.getValue()
+			backgroundIntensity.getValue(),
+			backgroundRotation.getValue()
 		);
 
 	}
@@ -229,6 +233,7 @@ function SidebarScene( editor ) {
 	const environmentType = new UISelect().setOptions( {
 
 		'None': '',
+		'Background': 'Background',
 		'Equirectangular': 'Equirect',
 		'ModelViewer': 'ModelViewer'
 

editor/js/Viewport.js

@@ -485,15 +485,11 @@ function Viewport( editor ) {
 
 	// background
 
-	signals.sceneBackgroundChanged.add( function ( backgroundType, backgroundColor, backgroundTexture, backgroundEquirectangularTexture, backgroundBlurriness, backgroundIntensity ) {
+	signals.sceneBackgroundChanged.add( function ( backgroundType, backgroundColor, backgroundTexture, backgroundEquirectangularTexture, backgroundBlurriness, backgroundIntensity, backgroundRotation ) {
 
-		switch ( backgroundType ) {
-
-			case 'None':
+		scene.background = null;
 
-				scene.background = null;
-
-				break;
+		switch ( backgroundType ) {
 
 			case 'Color':
 
@@ -516,9 +512,19 @@ function Viewport( editor ) {
 				if ( backgroundEquirectangularTexture ) {
 
 					backgroundEquirectangularTexture.mapping = THREE.EquirectangularReflectionMapping;
+
 					scene.background = backgroundEquirectangularTexture;
 					scene.backgroundBlurriness = backgroundBlurriness;
 					scene.backgroundIntensity = backgroundIntensity;
+					scene.backgroundRotation.y = backgroundRotation * THREE.MathUtils.DEG2RAD;
+
+					if ( useBackgroundAsEnvironment ) {
+
+						scene.environment = scene.background;
+						scene.environmentRotation.y = backgroundRotation * THREE.MathUtils.DEG2RAD;
+
+					}
+
 
 				}
 
@@ -532,20 +538,28 @@ function Viewport( editor ) {
 
 	// environment
 
+	let useBackgroundAsEnvironment = false;
+
 	signals.sceneEnvironmentChanged.add( function ( environmentType, environmentEquirectangularTexture ) {
 
+		scene.environment = null;
+
+		useBackgroundAsEnvironment = false;
+
 		switch ( environmentType ) {
 
-			case 'None':
 
-				scene.environment = null;
+			case 'Background':
+
+				useBackgroundAsEnvironment = true;
+
+				scene.environment = scene.background;
+				scene.environmentRotation.y = scene.backgroundRotation.y;
 
 				break;
 
 			case 'Equirectangular':
 
-				scene.environment = null;
-
 				if ( environmentEquirectangularTexture ) {
 
 					environmentEquirectangularTexture.mapping = THREE.EquirectangularReflectionMapping;