Update scene cameras to be shown in a window

editor/css/dark.css

@@ -225,6 +225,39 @@ select {
 		height: 24px;
 	}
 
+#cameraSelect {
+	position: absolute;
+	z-index: 10;
+}
+
+	#cameraSelect * {
+		width: 100%;
+	}
+
+	#cameraSelect[layout='topLeft']{
+	margin-top: 32px;
+		left: 0;
+		top : 0;
+	}
+
+	#cameraSelect[layout='topRight']{
+		margin-top: 32px;
+		margin-right: 300px;
+		right: 0;
+		top : 0;
+	}
+
+	#cameraSelect[layout='bottomLeft']{
+	bottom: 0;
+		left: 0;
+	}
+
+	#cameraSelect[layout='bottomRight']{ 
+	bottom: 0;
+		right: 0;
+		margin-right: 300px;
+	}
+
 .Outliner {
 	color: #888;
 	background: #222;

editor/css/light.css

@@ -218,6 +218,40 @@ select {
 		height: 24px;
 	}
 
+#cameraSelect {
+	position: absolute;
+	z-index: 10;
+}
+
+	#cameraSelect * {
+		width: 100%;
+	}
+
+	#cameraSelect[layout='topLeft']{
+    margin-top: 32px;
+		left: 0;
+		top : 0;
+	}
+
+	#cameraSelect[layout='topRight']{
+		margin-top: 32px;
+		margin-right: 300px;
+		right: 0;
+		top : 0;
+	}
+
+	#cameraSelect[layout='bottomLeft']{
+    bottom: 0;
+		left: 0;
+	}
+
+  #cameraSelect[layout='bottomRight']{ 
+    bottom: 0;
+		right: 0;
+		margin-right: 300px;
+	}
+
+
 .Outliner {
 	color: #444;
 	background-color: #fff;

editor/js/Config.js

@@ -20,6 +20,8 @@ var Config = function () {
 		'project/renderer/gammaInput': false,
 		'project/renderer/gammaOutput': false,
 		'project/renderer/shadows': true,
+		'project/renderer/sceneCameras': 'topLeft',
+		'project/renderer/showSceneCameras': true,
 
 		'project/vr': false,
 
@@ -29,7 +31,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

@@ -68,7 +68,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,41 @@ Sidebar.Settings = function ( editor ) {
 
 	container.add( themeRow );
 
+	var sceneCameraRow = new UI.Row();
+	container.add(sceneCameraRow);
+
+	var sceneCameraSelection = new UI.Select().setWidth('150px');
+	sceneCameraSelection.setOptions({
+		topLeft: 'Top Left',
+		bottomLeft: 'Bottom Left',
+		topRight: 'Top Right',
+		bottomRight: 'Bottom Right'
+	});
+
+	if(config.getKey('project/renderer/sceneCameras') !== undefined)
+	{
+		sceneCameraSelection.setValue(config.getKey('project/renderer/sceneCameras'));
+	}
+
+	sceneCameraSelection.onChange(function()
+	{
+		config.setKey('project/renderer/sceneCameras', this.getValue());
+		signals.sceneCamerasChanged.dispatch();
+	});
+
+	sceneCameraRow.add(new UI.Text(strings.getKey('sidebar/settings/sceneCameras')).setWidth('90px'), sceneCameraSelection);
+
+	var sceneShowCameraRow = new UI.Row();
+	container.add(sceneShowCameraRow);
+	
+	var sceneCameraCheckbox = new UI.Checkbox(true).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);
+	
 	container.add( new Sidebar.Settings.Shortcuts( editor ) );
 	container.add( new Sidebar.Settings.Viewport( editor ) );
 

editor/js/Strings.js

@@ -244,6 +244,8 @@ var Strings = function ( config ) {
 			'sidebar/settings/theme': 'Theme',
 			'sidebar/settings/theme/light': 'light',
 			'sidebar/settings/theme/dark': 'dark',
+			'sidebar/settings/sceneCameras': 'Scene Cameras',
+			'sidebar/settings/showSceneCameras': 'Show Scene Cameras',
 
 			'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,65 @@ var Viewport = function ( editor ) {
 
 	sceneHelpers.add( transformControls );
 
+	// Displaying scene cameras
+
+	var cameras = {};
+
+	var sceneCameraDisplay = new UI.Row();
+	sceneCameraDisplay.setId('cameraSelect');
+	sceneCameraDisplay.dom.setAttribute('layout', config.getKey('project/renderer/sceneCameras') || 'topLeft');
+	sceneCameraDisplay.setDisplay('none');
+	document.body.appendChild(sceneCameraDisplay.dom);
+
+	var canvas = document.createElement('canvas');
+	sceneCameraDisplay.dom.appendChild(canvas);
+	var ctx = canvas.getContext('2d');
+
+    var cameraSelect = new UI.Select().onChange(render);
+	sceneCameraDisplay.add(cameraSelect);
+
+    signals.objectAdded.add(function(object)
+    {
+        if(object !== null)
+        {
+			object.traverse(addCamera);
+			cameraSelect.setOptions(cameras);
+			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);
+            sceneCameraDisplay.setDisplay(config.getKey('project/renderer/showSceneCameras') === true && Object.keys(cameras).length > 0 ? 'block' : 'none');
+        }
+	});
+
+	signals.sceneCamerasChanged.add(function()
+	{
+		sceneCameraDisplay.dom.setAttribute('layout', config.getKey('project/renderer/sceneCameras') || 'topLeft');
+		sceneCameraDisplay.setDisplay(config.getKey('project/renderer/showSceneCameras') === true && Object.keys(cameras).length > 0 ? 'block' : 'none');
+	});
+	
+	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();
@@ -549,6 +609,17 @@ var Viewport = function ( editor ) {
 		sceneHelpers.updateMatrixWorld();
 		scene.updateMatrixWorld();
 
+		if(sceneCameraDisplay.dom.style.display != 'none')
+		{
+			var cam = scene.getObjectByProperty('uuid', cameraSelect.getValue());
+			if(cam !== undefined && cam.isCamera === true)
+			{
+				renderer.render(scene, cam);
+				var dom = renderer.domElement;
+				ctx.drawImage(dom, 0, 0, dom.width, dom.height, 0, 0, canvas.width, canvas.height);
+			}
+		}
+
 		renderer.render( scene, camera );
 
 		if ( renderer instanceof THREE.RaytracingRenderer === false ) {
@@ -556,7 +627,7 @@ var Viewport = function ( editor ) {
 			renderer.render( sceneHelpers, camera );
 
 		}
-
+		
 	}
 
 	return container;