Merge pull request #15998 from Temdog007/feature/CameraSwitch

Editor: Display Scene Camera on Main Scene

editor/css/dark.css

@@ -225,6 +225,23 @@ select {
 		height: 24px;
 	}
 
+#cameraSelect {
+	position: absolute;
+	z-index: 1;
+	padding: 10px;
+}
+	
+	#cameraSelect * {
+		width: 100%;
+	}
+
+	#cameraSelect{
+		margin-top: 32px;
+		margin-right: 300px;
+		right: 0;
+		top : 0;
+	}
+
 .Outliner {
 	color: #888;
 	background: #222;

editor/css/light.css

@@ -218,6 +218,24 @@ select {
 		height: 24px;
 	}
 
+#cameraSelect {
+	position: absolute;
+	z-index: 1;
+	padding: 10px;
+}
+	
+	#cameraSelect * {
+		width: 100%;
+	}
+
+	#cameraSelect{
+		margin-top: 32px;
+		margin-right: 300px;
+		right: 0;
+		top : 0;
+	}
+
+
 .Outliner {
 	color: #444;
 	background-color: #fff;

editor/js/Config.js

@@ -18,6 +18,8 @@ var Config = function () {
 		'project/renderer': 'WebGLRenderer',
 		'project/renderer/antialias': true,
 		'project/renderer/shadows': true,
+		'project/renderer/showHelpers': true,
+		'project/renderer/showSceneCameras': true,
 
 		'project/vr': false,
 
@@ -27,7 +29,7 @@ var Config = function () {
 		'settings/shortcuts/rotate': 'e',
 		'settings/shortcuts/scale': 'r',
 		'settings/shortcuts/undo': 'z',
-		'settings/shortcuts/focus': 'f'
+		'settings/shortcuts/focus': 'f',
 	};
 
 	if ( window.localStorage[ name ] === undefined ) {

editor/js/Editor.js

@@ -64,7 +64,9 @@ var Editor = function () {
 
 		showGridChanged: new Signal(),
 		refreshSidebarObject3D: new Signal(),
-		historyChanged: new Signal()
+		historyChanged: new Signal(),
+
+		sceneCamerasChanged: new Signal()
 
 	};
 

editor/js/Sidebar.Settings.js

@@ -74,6 +74,34 @@ Sidebar.Settings = function ( editor ) {
 
 	container.add( themeRow );
 
+	// scene camera visible
+
+	var sceneShowCameraRow = new UI.Row();
+	container.add( sceneShowCameraRow );
+
+	var sceneCameraCheckbox = new UI.Checkbox( config.getKey( 'project/renderer/showSceneCameras' ) || false ).onChange( function () {
+
+		config.setKey( 'project/renderer/showSceneCameras', this.getValue() );
+		signals.sceneCamerasChanged.dispatch();
+
+	} );
+
+	sceneShowCameraRow.add( new UI.Text( strings.getKey( 'sidebar/settings/showSceneCameras' ) ).setWidth( '90px' ), sceneCameraCheckbox );
+
+	// show helpers
+
+	var showHelpersRow = new UI.Row();
+	container.add( showHelpersRow );
+
+	var showHelpersCheckbox = new UI.Checkbox( config.getKey( 'project/renderer/showHelpers' ) || false ).onChange( function () {
+
+		config.setKey( 'project/renderer/showHelpers', this.getValue() );
+		signals.sceneGraphChanged.dispatch();
+
+	} );
+
+	showHelpersRow.add( new UI.Text( strings.getKey( 'sidebar/settings/showHelpers' ) ).setWidth( '90px' ), showHelpersCheckbox );
+
 	container.add( new Sidebar.Settings.Shortcuts( editor ) );
 	container.add( new Sidebar.Settings.Viewport( editor ) );
 

editor/js/Strings.js

@@ -242,6 +242,8 @@ var Strings = function ( config ) {
 			'sidebar/settings/theme': 'Theme',
 			'sidebar/settings/theme/light': 'light',
 			'sidebar/settings/theme/dark': 'dark',
+			'sidebar/settings/showSceneCameras': 'Cameras',
+			'sidebar/settings/showHelpers': 'Helpers',
 
 			'sidebar/settings/shortcuts/translate': 'Translate',
 			'sidebar/settings/shortcuts/rotate': 'Rotate',

editor/js/Viewport.js

@@ -5,6 +5,7 @@
 var Viewport = function ( editor ) {
 
 	var signals = editor.signals;
+	var config = editor.config;
 
 	var container = new UI.Panel();
 	container.setId( 'viewport' );
@@ -134,6 +135,76 @@ var Viewport = function ( editor ) {
 
 	sceneHelpers.add( transformControls );
 
+	// Displaying scene cameras
+
+	var cameras = {
+		[ camera.uuid ]: 'Main Camera'
+	};
+
+	var sceneCameraDisplay = new UI.Row();
+	sceneCameraDisplay.setId( 'cameraSelect' ).setDisplay( 'none' );
+	document.body.appendChild( sceneCameraDisplay.dom );
+
+	var cameraSelect = new UI.Select().onChange( render );
+	sceneCameraDisplay.add( cameraSelect );
+
+	signals.objectAdded.add( function ( object ) {
+
+		if ( object !== null ) {
+
+			object.traverse( addCamera );
+			cameraSelect.setOptions( cameras ).setValue( camera.uuid );
+			sceneCameraDisplay.setDisplay( config.getKey( 'project/renderer/showSceneCameras' ) === true && Object.keys( cameras ).length > 0 ? 'block' : 'none' );
+
+		}
+
+	} );
+
+	signals.objectRemoved.add( function ( object ) {
+
+		if ( object !== null ) {
+
+			object.traverse( removeCamera );
+			cameraSelect.setOptions( cameras ).setValue( camera.uuid );
+			sceneCameraDisplay.setDisplay( config.getKey( 'project/renderer/showSceneCameras' ) === true && Object.keys( cameras ).length > 0 ? 'block' : 'none' );
+
+		}
+
+	} );
+
+	signals.sceneCamerasChanged.add( function () {
+
+		var optionSelected = config.getKey( 'project/renderer/showSceneCameras' ) === true;
+		sceneCameraDisplay.setDisplay( optionSelected && Object.keys( cameras ).length > 0 ? 'block' : 'none' );
+		if ( optionSelected === false ) {
+
+			cameraSelect.setValue( camera.uuid );
+			render();
+
+		}
+
+	} );
+
+	function addCamera( object ) {
+
+		if ( object.isCamera === true ) {
+
+			cameras[ object.uuid ] = object.name;
+
+		}
+
+	}
+
+	function removeCamera( object ) {
+
+		if ( object.isCamera === true ) {
+
+			delete cameras[ object.uuid ];
+
+		}
+
+	}
+
 	// object picking
 
 	var raycaster = new THREE.Raycaster();
@@ -554,11 +625,25 @@ var Viewport = function ( editor ) {
 		sceneHelpers.updateMatrixWorld();
 		scene.updateMatrixWorld();
 
-		renderer.render( scene, camera );
+		var cam = camera;
+		var uuid = cameraSelect.getValue();
+
+		if ( uuid !== camera.uuid && sceneCameraDisplay.dom.style.display != 'none' ) {
+
+			var sceneCamera = scene.getObjectByProperty( 'uuid', uuid );
+			if ( sceneCamera !== undefined && sceneCamera.isCamera === true ) {
+
+				cam = sceneCamera;
+
+			}
+
+		}
+
+		renderer.render( scene, cam );
 
-		if ( renderer instanceof THREE.RaytracingRenderer === false ) {
+		if ( config.getKey( 'project/renderer/showHelpers' ) === true && renderer instanceof THREE.RaytracingRenderer === false ) {
 
-			renderer.render( sceneHelpers, camera );
+			renderer.render( sceneHelpers, cam );
 
 		}