From 4c7cad2ebfc44244ba845c1574271e48b9f2b740 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 4 Feb 2015 13:30:39 -0500 Subject: orbit camera --- .../javascripts/mx/extensions/mx.orbitCamera.js | 80 ++++++++++++ public/assets/javascripts/rectangles/util/mouse.js | 8 ++ public/assets/test/orbit.html | 140 +++++++++++++++++++++ public/assets/test/ortho.html | 50 ++------ 4 files changed, 235 insertions(+), 43 deletions(-) create mode 100644 public/assets/javascripts/mx/extensions/mx.orbitCamera.js create mode 100644 public/assets/test/orbit.html (limited to 'public') diff --git a/public/assets/javascripts/mx/extensions/mx.orbitCamera.js b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js new file mode 100644 index 0000000..b3dcc43 --- /dev/null +++ b/public/assets/javascripts/mx/extensions/mx.orbitCamera.js @@ -0,0 +1,80 @@ +MX.OrbitCamera = function(opt){ + var exports = {}, bound = false + exports.opt = opt = defaults(opt, { + el: window, // object to bind events on + camera: scene.camera, // camera object we'll be moving + radius: 100, + radiusRange: [ 10, 1000 ], + rotationX: PI/2, + rotationY: 0, + center: { x: 0, y: 0, z: 0 }, + sensitivity: 10, // moving 1 pixel is like moving N radians + ease: 10, + }) + var rx, ry, px, py, epsilon = 1e-10, dragging = false + exports.init = function(){ + ry = opt.rotationY + rx = opt.rotationX + exports.bind() + } + exports.toggle = function(state){ + if (state) exports.bind() + else exports.unbind() + } + exports.bind = function(){ + if (bound) return; + bound = true + opt.el.addEventListener("mousedown", down) + opt.el.addEventListener("mousemove", move) + opt.el.addEventListener("mouseup", up) + } + exports.unbind = function(){ + if (! bound) return; + bound = false + opt.el.removeEventListener("mousedown", down) + opt.el.removeEventListener("mousemove", move) + opt.el.removeEventListener("mouseup", up) + } + function down (e) { + px = e.pageX + py = e.pageY + dragging = true + } + function move (e) { + if (! dragging) return + exports.delta(px- e.pageX, py - e.pageY) + px = e.pageX + py = e.pageY + } + function up (e) { + dragging = false + } + exports.delta = function(x,y){ + opt.rotationY += x/window.innerWidth * opt.sensitivity + opt.rotationX = clamp( opt.rotationX + y/window.innerHeight * opt.sensitivity, 0, PI) + } + exports.move = function(y, x){ + opt.rotationY = y + if (typeof x == "number") { opt.rotationX = x } + } + exports.update = function(){ + if (abs(ry - opt.rotationY) > epsilon) { + ry = avg(ry, opt.rotationY, opt.ease) + } + else { + ry = opt.rotationY + } + if (abs(rx - opt.rotationX) > epsilon) { + rx = avg(rx, opt.rotationX, opt.ease) + } + else { + rx = opt.rotationX + } + opt.camera.x = opt.center.x + opt.radius * sin(rx) * cos(ry) + opt.camera.z = opt.center.y + opt.radius * sin(rx) * sin(ry) + opt.camera.y = opt.center.z + opt.radius * cos(rx) + opt.camera.rotationX = PI/2 - rx + opt.camera.rotationY = ry + PI/2 + } + return exports +} diff --git a/public/assets/javascripts/rectangles/util/mouse.js b/public/assets/javascripts/rectangles/util/mouse.js index cb36038..86edf6c 100644 --- a/public/assets/javascripts/rectangles/util/mouse.js +++ b/public/assets/javascripts/rectangles/util/mouse.js @@ -76,6 +76,14 @@ function mouse (opt) { window.addEventListener("mousemove", base.mousemove) window.addEventListener("mouseup", base.mouseup) } + base.unbind = function(){ + if (opt.el) { + opt.el.removeEventListener("mousedown", base.mousedown) + opt.el.removeEventListener("contextmenu", base.contextmenu) + } + window.removeEventListener("mousemove", base.mousemove) + window.removeEventListener("mouseup", base.mouseup) + } base.bind_el = function(el){ el.addEventListener("mousedown", base.mousedown) diff --git a/public/assets/test/orbit.html b/public/assets/test/orbit.html new file mode 100644 index 0000000..8b45de6 --- /dev/null +++ b/public/assets/test/orbit.html @@ -0,0 +1,140 @@ + + +
+
+ +
+ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html index bd94a51..57e050c 100644 --- a/public/assets/test/ortho.html +++ b/public/assets/test/ortho.html @@ -32,6 +32,7 @@ body { + @@ -94,43 +95,6 @@ Map.UI.Ortho = function(map){ } }) } -MX.OrbitCamera = function(opt){ - var exports = {}, bound = false - exports.opt = opt = defaults(opt, { - el: window, // object to bind events on - camera: scene.camera, // camera object we'll be moving - radius: 100, - radiusRange: [ 10, 1000 ], - rotationX: 0, - rotationY: 0, - center: { x: 0, y: 0, z: 0 }, - }) - exports.init = function(){ - exports.bind() - } - exports.toggle = function(state){ - if (state) exports.bind() - else exports.unbind() - } - exports.bind = function(){ - if (bound) return; - bound = true - } - exports.unbind = function(){ - if (! bound) return; - bound = false - } - exports.update = function(){ - opt.camera.x = opt.radius * sin(opt.rotationY) * cos(opt.rotationX) - opt.camera.y = opt.radius * sin(opt.rotationY) * sin(opt.rotationX) - opt.camera.z = opt.radius * cos(opt.rotationY) - opt.camera.rotationX = opt.rotationX - opt.camera.rotationY = PI-opt.rotationY - hud.innerHTML = opt.camera.toString() - } - - return exports -} var scene, map, controls @@ -167,17 +131,17 @@ function polyline (time) { } } document.addEventListener('DOMContentLoaded', build_circle) -function add_mx_point (p) { +function add_mx_point (p, i) { var mx = new MX.Object3D() mx.updateChildren = false mx.move({ x: p.a, - y: 0, + y: i/4, z: p.b, width: 1, - height: 1, + height: i/2, }) - mx.el.style.backgroundColor = "#f80" + mx.el.style.backgroundColor = 'rgb(' + [abs(floor(p.a*30)), 0, abs(floor(p.b*30))] + ')' mx.el.style.backfaceVisibility = "visible" scene.add(mx) mx.update() @@ -200,11 +164,11 @@ function build_circle () { var theta, rad = 10; for (var i = 0; i < 100; i++) { - theta = (i/TWO_PI) + theta = (i/100 * TWO_PI) add_mx_point({ a: sin(theta) * rad, b: cos(theta) * rad, - }) + }, i) } scene.update() -- cgit v1.2.3-70-g09d2