toggle keyboard/orbit cam

1 files changed, 52 insertions, 4 deletions

diff --git a/public/assets/test/ortho2.html b/public/assets/test/ortho2.html
index 89a5688..d6f0c5c 100644
--- a/public/assets/test/ortho2.html
+++ b/public/assets/test/ortho2.html
@@ -1,3 +1,4 @@
+<link href='/assets/stylesheets/ionicons.css' rel='stylesheet' type='text/css'>
 <style type="text/css">
 html,body{width:100%;height:100%;margin:0;padding:0;}
 body {
@@ -22,6 +23,8 @@ body {
   background: white;
 }
 #url { width: 300px }
+#hud span { color: #888; cursor: pointer; }
+#hud span.active { color: #000; }
 </style>
 
 <div id="perspective"></div>
@@ -29,9 +32,12 @@ body {
 
 <div id="hud">
   <input type="text" id="url" placeholder="paste an image URL here!">
+  <span class="ion-ionic active" data-role="orbit-mode"></span>
+  <span class="ion-archive" data-role="keyboard-mode"></span>
 </div>
 
 <script src="/assets/javascripts/util.js"></script>
+<script src="/assets/javascripts/defaults.js"></script>
 <script src="/assets/javascripts/vendor/bower_components/jquery/dist/jquery.min.js"></script>
 <script src="/assets/javascripts/vendor/bower_components/lodash/lodash.min.js"></script>
 <script src="/assets/javascripts/vendor/bower_components/hidpi-canvas/dist/hidpi-canvas.js"></script>
@@ -40,6 +46,7 @@ body {
 <script src="/assets/javascripts/mx/mx.js"></script>
 <script src="/assets/javascripts/mx/extensions/mx.scene.js"></script>
 <script src="/assets/javascripts/mx/extensions/mx.orbitCamera.js"></script>
+<script src="/assets/javascripts/mx/extensions/mx.movements.js"></script>
 <script src="/assets/javascripts/mx/primitives/mx.grid.js"></script>
 <script src="/assets/javascripts/mx/primitives/mx.image.js"></script>
 <script src="/assets/javascripts/rectangles/util/constants.js"></script>
@@ -53,6 +60,11 @@ body {
 <script src="/assets/javascripts/rectangles/engine/map/draw.js"></script>
 
 <script>
+var app = window.app || {}
+app.tube = new Tube ()
+app.on = function(){ app.tube.on.apply(app.tube, arguments) }
+app.off = function(){	app.tube.off.apply(app.tube, arguments) }
+
 Map.UI = Map.UI || {}
 Map.UI.Ortho = function(map){
 
@@ -154,8 +166,7 @@ $(window).resize(function(){
   map.canvas.width = map.dimensions.a = window.innerWidth/2
 })
 
-
-var wall_height = 100
+var wall_height = 180
 var placing = false
 var points, mx_points = []
 var shapes = []
@@ -239,15 +250,46 @@ function add_mx_point (p, i) {
 $("#url").on("input", function(){
   floorplan.load({ src: this.value })
 })
+$("[data-role=orbit-mode]").click(function(){
+  $("#hud .active").removeClass('active')
+  $(this).addClass('active')
+  controls.toggle(true)
+  movements.lock()
+})
+$("[data-role=keyboard-mode]").click(function(){
+  $("#hud .active").removeClass('active')
+  $(this).addClass('active')
+  controls.toggle(false)
+  movements.unlock()
+  movements.gravity(true)
+  cam.rotationX = 0
+  cam.rotationY = -cam.rotationY
+  cam.x = 0
+  cam.y = viewHeight + 100
+  cam.z = 0
+})
 
 document.addEventListener('DOMContentLoaded', build)
 function build () {
 	scene = new MX.Scene().addTo("#perspective")
 	scene.camera.radius = 20
 
+  viewHeight = 100
+
 	scene.width = window.innerWidth/2
 	scene.height = window.innerHeight
 	scene.perspective = window.innerHeight
+	
+	cam = scene.camera
+	movements = new MX.Movements(cam, viewHeight)
+	movements.init()
+	movements.lock()
+	movements.velocity(8)
+	app.on("move", function(pos){
+	  cam.x = pos.x
+	  cam.y = pos.y
+	  cam.z = pos.z
+	})
 
   floorplan = new MX.Image({
     src: "https://s3.amazonaws.com/luckyplop/fbf4295da80f1f66c5e4a248f2ea3e1ce7a22c3d.jpg",
@@ -270,10 +312,16 @@ function build () {
 
 	animate(0)
 }
-function animate(time){
+var last_t = 0
+function animate(t){
   requestAnimationFrame(animate)
-  map.update(time)
 
+  var dt = t - last_t
+  last_t = t
+
+  map.update(t)
+
+  movements.update(dt)
 	controls.update()
   scene.update()