Add camera reset capability, place camera appropriately every time a …

…new object is loaded
verma · Mar 7, 2014 · a227208 · a227208
1 parent b9efb0c
commit a227208
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -289,6 +289,10 @@
 				border: none;
 			}
 
+			#camera-type-group .btn {
+				width: 33%;
+			}
+
 		</style>
 	</head>
 	<body data-custom-load="true" data-name="plasio_laszip"
@@ -372,14 +376,17 @@ <h3>Camera</h3>
 						<div class="labeled-controls">
 							<h4>Type</h4>
 							<h5>Perspective camera provides a 3D view, while orthographic and top-view cameras provide an ortho views</h5>
-							<div style="text-align: center;" :class="btn-toolbar" role="toolbar">
-								<div class="btn-group btn-group-sm">
-									<button type="button" class="btn btn-default" id="perspective">Perspective</button>
-									<button type="button" class="btn btn-default" id="ortho">Orthographic</button>
-									<button type="button" class="btn btn-default" id="top-view">Top-View</button>
-								</div>
+							<div class="btn-group btn-group-sm btn-block" id="camera-type-group">
+								<button type="button" class="btn btn-default" id="perspective">Perspective</button>
+								<button type="button" class="btn btn-default" id="ortho">Orthographic</button>
+								<button type="button" class="btn btn-default" id="top-view">Top-View</button>
 							</div>
 						</div>
+						<div class="labeled-controls">
+							<h4>Reset</h4>
+							<h5>Take view back to its initial state</h5>
+							<button type="button" class="btn btn-sm btn-default btn-block" id="camera-reset">Reset View</button>
+						</div>
 						<div class="labeled-controls">
 							<h4>Field of View</h4>
 							<h5>Changing Field of View provides interesting effects, only applies to Perspective Cameras</h5>

diff --git a/js/render.js b/js/render.js
@@ -26,6 +26,7 @@
 	};
 
 	var oldBatcher = null; // the particle system which is already loaded
+	var restorePoint = [];
 	w.loadBatcher = function(batcher) {
 		if (oldBatcher !== null)
 			oldBatcher.removeFromScene(scene);
@@ -34,9 +35,13 @@
 		oldBatcher = batcher;
 
 		setupView(batcher.mn, batcher.mx);
+
+		restorePoint = [batcher.mn.clone(), batcher.mx.clone()];
 	}
 
 	var setupView = function(mins, maxs) {
+		controls.reset();
+
 		// make sure the projection and camera is setup correctly to view the loaded data
 		//
 		var range = [
@@ -88,7 +93,7 @@
 		camera.updateProjectionMatrix();
 		orthoCamera.updateProjectionMatrix();
 		topViewCamera.updateProjectionMatrix();
-	}
+	};
 
 	var numberWithCommas = function(x) {
 		return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
@@ -165,6 +170,13 @@
 		$(document).on("plasio.camera.topView", function() {
 			activeCamera = topViewCamera;
 		});
+
+		$(document).on("plasio.camera.reset", function() {
+			// reset the perspective camera controls
+			controls.reset();
+			if (restorePoint.length > 0)
+				setupView(restorePoint[0], restorePoint[1]);
+		});
 	}
 
 	function onWindowResize() {

diff --git a/js/ui.js b/js/ui.js
@@ -538,6 +538,12 @@
 				type: 'plasio.camera.topView'
 			});
 		});
+
+		$("#camera-reset").on("click", function() {
+			$.event.trigger({
+				type: 'plasio.camera.reset'
+			});
+		});
 
 	};