diff options
| -rw-r--r-- | public/assets/javascripts/defaults.js | 3 | ||||
| -rw-r--r-- | public/assets/javascripts/mx/extensions/mx.movements.js | 18 | ||||
| -rw-r--r-- | public/assets/javascripts/mx/extensions/mx.orbitCamera.js | 1 | ||||
| -rw-r--r-- | public/assets/test/ortho2.html | 56 |
4 files changed, 66 insertions, 12 deletions
diff --git a/public/assets/javascripts/defaults.js b/public/assets/javascripts/defaults.js index 12aed62..413bb13 100644 --- a/public/assets/javascripts/defaults.js +++ b/public/assets/javascripts/defaults.js @@ -1,3 +1,4 @@ +app = window.app || {} app.defaults = { viewHeight: window.viewHeight = 186, units: app.units = "ft", @@ -13,7 +14,7 @@ app.defaults = { }, } -marked.setOptions({ +window.marked && marked.setOptions({ sanitize: true, smartypants: true, }) diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js index 9af2c8d..bc71fc4 100644 --- a/public/assets/javascripts/mx/extensions/mx.movements.js +++ b/public/assets/javascripts/mx/extensions/mx.movements.js @@ -39,7 +39,7 @@ MX.Movements = function (cam) { }) function clampRotation( vr ) { - if (Rooms.mover.noclip) { + if (window.Rooms && Rooms.mover.noclip) { return clamp(vr, PI/-2, PI/2 ) } else { @@ -221,15 +221,19 @@ MX.Movements = function (cam) { /* case 48: // 0 - cam.rotationX = 0 - cam.rotationY = 0 - cam.x = 0 - cam.y = viewHeight - cam.z = 0 + movements.center() break */ } }, + + center: function(){ + cam.rotationX = 0 + cam.rotationY = 0 + cam.x = 0 + cam.y = viewHeight + cam.z = 0 + }, mousedown: function (e) { if (locked) return; @@ -341,7 +345,7 @@ MX.Movements = function (cam) { jumping = false } - var ceiling = (Rooms.mover.room ? Rooms.mover.room.height : 5000) + var ceiling = ((window.Rooms && Rooms.mover.room) ? Rooms.mover.room.height : 5000) if (pos.y >= ceiling-5) { vy = 0 diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js index 6dc5b6c..f4759fb 100644 --- a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js +++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js @@ -68,6 +68,7 @@ MX.OrbitCamera = function(opt){ if (typeof x == "number") { opt.rotationX = x } } exports.update = function(){ + if (! bound) return if (abs(ry - opt.rotationY) > epsilon) { ry = avg(ry, opt.rotationY, opt.ease) } 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() |