Editor: Refactored viewport camera code.

editor/css/dark.css

@@ -225,23 +225,6 @@ 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;
@@ -311,7 +294,7 @@ select {
 	#toolbar {
 		left: calc(50% - 140px);
 		width: 280px;
-		top: 52px;
+		top: 68px;
 	}
 
 }

editor/css/light.css

@@ -218,24 +218,6 @@ 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;
@@ -305,7 +287,7 @@ select {
 	#toolbar {
 		left: calc(50% - 140px);
 		width: 280px;
-		top: 52px;
+		top: 68px;
 	}
 
 }

editor/index.html

@@ -143,6 +143,7 @@
 		<script src="js/Strings.js"></script>
 		<script src="js/Toolbar.js"></script>
 		<script src="js/Viewport.js"></script>
+		<script src="js/Viewport.Camera.js"></script>
 		<script src="js/Viewport.Info.js"></script>
 
 		<script src="js/Command.js"></script>

editor/js/Config.js

@@ -18,8 +18,6 @@ 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,
 
@@ -29,7 +27,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

@@ -51,6 +51,9 @@ var Editor = function () {
 		objectChanged: new Signal(),
 		objectRemoved: new Signal(),
 
+		cameraAdded: new Signal(),
+		cameraRemoved: new Signal(),
+
 		helperAdded: new Signal(),
 		helperRemoved: new Signal(),
 
@@ -66,7 +69,7 @@ var Editor = function () {
 		refreshSidebarObject3D: new Signal(),
 		historyChanged: new Signal(),
 
-		sceneCamerasChanged: new Signal()
+		viewportCameraChanged: new Signal()
 
 	};
 
@@ -97,6 +100,11 @@ var Editor = function () {
 	this.selected = null;
 	this.helpers = {};
 
+	this.cameras = {};
+	this.viewportCamera = this.camera;
+
+	this.addCamera( this.camera );
+
 };
 
 Editor.prototype = {
@@ -147,6 +155,7 @@ Editor.prototype = {
 			if ( child.geometry !== undefined ) scope.addGeometry( child.geometry );
 			if ( child.material !== undefined ) scope.addMaterial( child.material );
 
+			scope.addCamera( child );
 			scope.addHelper( child );
 
 		} );
@@ -197,6 +206,7 @@ Editor.prototype = {
 
 		object.traverse( function ( child ) {
 
+			scope.removeCamera( child );
 			scope.removeHelper( child );
 
 		} );
@@ -252,6 +262,32 @@ Editor.prototype = {
 
 	//
 
+	addCamera: function ( camera ) {
+
+		if ( camera.isCamera ) {
+
+			this.cameras[ camera.uuid ] = camera;
+
+			this.signals.cameraAdded.dispatch( camera );
+
+		}
+
+	},
+
+	removeCamera: function ( camera ) {
+
+		if ( this.cameras[ camera.uuid ] !== undefined ) {
+
+			delete this.cameras[ camera.uuid ];
+
+			this.signals.cameraRemoved.dispatch( camera );
+
+		}
+
+	},
+
+	//
+
 	addHelper: function () {
 
 		var geometry = new THREE.SphereBufferGeometry( 2, 4, 2 );
@@ -381,6 +417,13 @@ Editor.prototype = {
 
 	},
 
+	setViewportCamera: function ( uuid ) {
+
+		this.viewportCamera = this.cameras[ uuid ];
+		this.signals.viewportCameraChanged.dispatch( this.viewportCamera );
+
+	},
+
 	//
 
 	select: function ( object ) {

editor/js/Sidebar.Settings.js

@@ -72,35 +72,7 @@ Sidebar.Settings = function ( editor ) {
 	themeRow.add( new UI.Text( strings.getKey( 'sidebar/settings/theme' ) ).setWidth( '90px' ) );
 	themeRow.add( theme );
 
-	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( themeRow );	
 
 	container.add( new Sidebar.Settings.Shortcuts( editor ) );
 	container.add( new Sidebar.Settings.Viewport( editor ) );

editor/js/Strings.js

@@ -242,8 +242,6 @@ 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.Camera.js

@@ -0,0 +1,48 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+Viewport.Camera = function ( editor ) {
+
+	var signals = editor.signals;
+
+	//
+
+	var cameraSelect = new UI.Select();
+	cameraSelect.setPosition( 'absolute' );
+	cameraSelect.setRight( '10px' );
+	cameraSelect.setTop( '10px' );
+	cameraSelect.onChange( function () {
+
+		editor.setViewportCamera( this.getValue() );
+
+	} );
+
+	signals.cameraAdded.add( update );
+	signals.cameraRemoved.add( update );
+
+	update();
+
+	//
+
+	function update() {
+
+		var options = {};
+
+		var cameras = editor.cameras;
+
+		for ( var key in cameras ) {
+
+			var camera = cameras[ key ];
+			options[ camera.uuid ] = camera.name;
+
+		}
+
+		cameraSelect.setOptions( options );
+		cameraSelect.setValue( editor.viewportCamera.uuid );
+
+	}
+
+	return cameraSelect;
+
+};

editor/js/Viewport.js

@@ -5,12 +5,12 @@
 var Viewport = function ( editor ) {
 
 	var signals = editor.signals;
-	var config = editor.config;
 
 	var container = new UI.Panel();
 	container.setId( 'viewport' );
 	container.setPosition( 'absolute' );
 
+	container.add( new Viewport.Camera( editor ) );
 	container.add( new Viewport.Info( editor ) );
 
 	//
@@ -135,76 +135,6 @@ 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();
@@ -269,7 +199,7 @@ var Viewport = function ( editor ) {
 
 	function onMouseDown( event ) {
 
-		event.preventDefault();
+		// event.preventDefault();
 
 		var array = getMousePosition( container.dom, event.clientX, event.clientY );
 		onDownPosition.fromArray( array );
@@ -570,6 +500,17 @@ var Viewport = function ( editor ) {
 
 	} );
 
+	signals.viewportCameraChanged.add( function ( viewportCamera ) {
+
+		camera = viewportCamera;
+
+		camera.aspect = editor.camera.aspect;
+		camera.projectionMatrix.copy( editor.camera.projectionMatrix );
+
+		render();
+
+	} );
+
 	//
 
 	signals.windowResize.add( function () {
@@ -622,31 +563,20 @@ var Viewport = function ( editor ) {
 
 	function render() {
 
-		sceneHelpers.updateMatrixWorld();
 		scene.updateMatrixWorld();
+		renderer.render( scene, camera );
 
-		var cam = camera;
-		var uuid = cameraSelect.getValue();
+		if ( renderer instanceof THREE.RaytracingRenderer === false ) {
 
-		if ( uuid !== camera.uuid && sceneCameraDisplay.dom.style.display != 'none' ) {
+			if ( camera === editor.camera ) {
 
-			var sceneCamera = scene.getObjectByProperty( 'uuid', uuid );
-			if ( sceneCamera !== undefined && sceneCamera.isCamera === true ) {
-
-				cam = sceneCamera;
+				sceneHelpers.updateMatrixWorld();
+				renderer.render( sceneHelpers, camera );
 
 			}
 
 		}
 
-		renderer.render( scene, cam );
-
-		if ( config.getKey( 'project/renderer/showHelpers' ) === true && renderer instanceof THREE.RaytracingRenderer === false ) {
-
-			renderer.render( sceneHelpers, cam );
-
-		}
-
 	}
 
 	return container;