Update to show camera views on the side

editor/js/Editor.js

@@ -80,7 +80,7 @@ var Editor = function () {
 	this.loader = new Loader( this );
 
 	this.camera = this.DEFAULT_CAMERA.clone();
-	this.currentCamera = null;
+	this.sceneCameras = [];
 
 	this.scene = new THREE.Scene();
 	this.scene.name = 'Scene';

editor/js/Sidebar.Object.js

@@ -8,6 +8,8 @@ Sidebar.Object = function ( editor ) {
 
 	var signals = editor.signals;
 
+	var sceneCameras = editor.sceneCameras;
+
 	var container = new UI.Panel();
 	container.setBorderTop( '0' );
 	container.setPaddingTop( '20px' );
@@ -316,128 +318,33 @@ Sidebar.Object = function ( editor ) {
 	var cameraViewRow = new UI.Row().setDisplay( editor.selected !== null && editor.selected.isCamera ? 'block' : 'none' );
 	container.add( cameraViewRow );
 
-	var cameraViewButton = new UI.Button( strings.getKey( 'sidebar/object/view' ) );
-	var cameraTransitioning = false;
-	var transitionCamera = new THREE.PerspectiveCamera();
-	cameraViewButton.onClick( function () {
-
-		if ( editor.selected.isCamera === true && cameraTransitioning === false ) {
+	cameraViewRow.add( new UI.Text(strings.getKey( 'sidebar/object/view' )).setWidth('90px'));
 
-			editor.selected.updateMatrixWorld( true );
-			editor.currentCamera = transitionCamera;
-			transitionCamera.copy( editor.selected );
-			cameraViewButton.dom.setAttribute( 'viewset', '' );
-
-			var start = getCameraData( editor.camera );
-			var end = getCameraData( transitionCamera );
-			startCameraTransition( start, end );
+	var cameraViewCheckbox = new UI.Checkbox(false).onChange(update).onClick(function() {
+		var camera = editor.selected;
+		if(camera.isCamera !== true) return;
 
+		if(sceneCameras.indexOf(camera) === -1)
+		{
+			sceneCameras.push(camera);
+			cameraViewCheckbox.setValue(true);
 		}
-
-	} );
-
-	cameraViewButton.onMouseOut( function () {
-
-		if ( editor.currentCamera === transitionCamera ) {
-
-			cameraViewButton.dom.removeAttribute( 'viewset' );
-
-			var start = getCameraData( transitionCamera );
-			var end = getCameraData( editor.camera );
-			startCameraTransition( start, end, true );
-
-		}
-
-	} );
-
-	cameraViewRow.add( cameraViewButton );
-
-	function startCameraTransition( start, end, clearCamera ) {
-
-		var func = cameraTransition( start, end, clearCamera );
-		var result = { done: false };
-		function run() {
-
-			if ( result.done !== true ) {
-
-				result = func.next();
-				setTimeout( run );
-
-			}
-
+		else
+		{
+			sceneCameras.splice(sceneCameras.indexOf(camera), 1);
+			cameraViewCheckbox.setValue(false);
 		}
-		run();
-
-	}
-
-	function* cameraTransition( start, end, clearCamera ) {
-
-		while ( cameraTransitioning === true ) {
-
-			yield;
-
-		}
-
-		cameraTransitioningng = true;
-
-		var startTime = performance.now();
-		var t = 0;
-		do {
-
-			transitionCamera.position.lerpVectors( start.position, end.position, t );
-			THREE.Quaternion.slerp( start.quaternion, end.quaternion, transitionCamera.quaternion, t );
-
-			transitionCamera.far = lerpValue( start.far, end.far, t );
-			transitionCamera.fov = lerpValue( start.fov, end.fov, t );
-			transitionCamera.near = lerpValue( start.near, end.near, t );
-			transitionCamera.aspect = lerpValue( start.aspect, end.aspect, t );
-
-			transitionCamera.updateProjectionMatrix();
-			signals.cameraChanged.dispatch();
-			yield;
-
-			t = Math.min( 1, ( performance.now() - startTime ) / 250 );
-
-		} while ( t !== 1 );
-
-		transitionCamera.position.copy( end.position );
-		transitionCamera.quaternion.copy( end.quaternion );
-		transitionCamera.far = end.far;
-		transitionCamera.fov = end.fov;
-		transitionCamera.near = end.near;
-		transitionCamera.aspect = end.aspect;
-
-		if ( clearCamera ) editor.currentCamera = null;
-
 
 		signals.cameraChanged.dispatch();
+	});
+	cameraViewRow.add( cameraViewCheckbox );
 
-		cameraTransitioning = false;
+	signals.cameraChanged.add(function() {
+		var camera = editor.selected;
+		if(camera.isCamera !== true) return;
 
-	}
-
-	function getCameraData( camera ) {
-
-		var position = new THREE.Vector3();
-		var quaternion = new THREE.Quaternion();
-		var scale = new THREE.Vector3();
-		camera.matrixWorld.decompose( position, quaternion, scale );
-		return {
-			position: position,
-			quaternion: quaternion,
-			fov: camera.fov,
-			near: camera.near,
-			far: camera.far,
-			aspect: camera.aspect
-		};
-
-	}
-
-	function lerpValue( a, b, t ) {
-
-		return a + ( b - a ) * t;
-
-	}
+		cameraViewCheckbox.setValue(sceneCameras.indexOf(camera) !== -1);
+	});
 
 
 	//
@@ -816,7 +723,15 @@ Sidebar.Object = function ( editor ) {
 
 		}
 
-		cameraViewRow.setDisplay( object.isCamera === true ? 'block' : 'none' );
+		if(object.isCamera === true) {
+
+			cameraViewRow.setDisplay('block');
+			cameraViewCheckbox.setValue(sceneCameras.indexOf(object) !== -1)
+
+		}
+		else {
+			cameraViewRow.setDisplay('none');
+		}
 
 		objectVisible.setValue( object.visible );
 		objectFrustumCulled.setValue( object.frustumCulled );

editor/js/Strings.js

@@ -97,7 +97,7 @@ var Strings = function ( config ) {
 			'sidebar/object/frustumcull': 'Frustum Cull',
 			'sidebar/object/renderorder': 'Render Order',
 			'sidebar/object/userdata': 'User data',
-			'sidebar/object/view': 'Set View',
+			'sidebar/object/view': 'Show View',
 
 			'sidebar/geometry/type': 'Type',
 			'sidebar/geometry/new': 'New',

editor/js/Viewport.js

@@ -6,6 +6,8 @@ var Viewport = function ( editor ) {
 
 	var signals = editor.signals;
 
+	var sceneCameras = editor.sceneCameras;
+
 	var container = new UI.Panel();
 	container.setId( 'viewport' );
 	container.setPosition( 'absolute' );
@@ -329,6 +331,16 @@ var Viewport = function ( editor ) {
 
 	signals.cameraChanged.add( function () {
 
+		if(sceneCameras.length >= 4)
+		{
+			alert("Only 4 different cameras can be shown at once.");
+			while(sceneCameras.length >= 4)
+			{
+				sceneCameras.pop();
+			}
+			signals.cameraChanged.dispatch();
+			return;
+		}
 		render();
 
 	} );
@@ -549,22 +561,28 @@ var Viewport = function ( editor ) {
 		sceneHelpers.updateMatrixWorld();
 		scene.updateMatrixWorld();
 
-		if ( editor.currentCamera !== null ) {
-
-			renderer.render( scene, editor.currentCamera );
-
-		} else {
+		// handle update to 3 cameras in the scene camera list
+		var width = window.innerWidth;
+		var height = window.innerHeight;
+		var v = new THREE.Vector4(0, 0, width, height);
+		
+		renderScene(camera, v, true);
+		for(var i = 0; i < sceneCameras.length; ++i) {
+			v.set(0, height * 0.25 * i, width * 0.25, height * 0.5);
+			renderScene(sceneCameras[i], v);
+		}
+	}
 
-			renderer.render( scene, camera );
+	function renderScene(camera, viewport, showHelpers)
+	{
+		renderer.setViewport(viewport.x, viewport.y, viewport.z, viewport.w);
+		renderer.render( scene, camera );
 
-			if ( renderer instanceof THREE.RaytracingRenderer === false ) {
+		if ( showHelpers === true && renderer instanceof THREE.RaytracingRenderer === false ) {
 
-				renderer.render( sceneHelpers, camera );
-
-			}
+			renderer.render( sceneHelpers, camera );
 
 		}
-
 	}
 
 	return container;