basic orbit camera

1 files changed, 50 insertions, 5 deletions

diff --git a/public/assets/test/ortho.html b/public/assets/test/ortho.html
index e7ec113..bd94a51 100644
--- a/public/assets/test/ortho.html
+++ b/public/assets/test/ortho.html
@@ -14,6 +14,9 @@ body {
 	left:50%;
 	top:0px
 }
+#hud {
+	white-space: pre;
+}
 </style>
 
 <div id="perspective"></div>
@@ -90,10 +93,46 @@ Map.UI.Ortho = function(map){
 			new_cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
 		}
 	})
-
+}
+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
+var scene, map, controls
 
 map = new Map ({
 	type: "ortho",
@@ -135,8 +174,8 @@ function add_mx_point (p) {
 		x: p.a,
 		y: 0,
 		z: p.b,
-		width: 5,
-		height: 5,
+		width: 1,
+		height: 1,
 	})
 	mx.el.style.backgroundColor = "#f80"
 	mx.el.style.backfaceVisibility = "visible"
@@ -169,13 +208,18 @@ function build_circle () {
 	}
 
 	scene.update()
+
+	controls = new MX.OrbitCamera()
+	controls.init()
+
 	console.log("ready..perhaps")
-	animate()
+	animate(0)
 }
 function animate(time){
   requestAnimationFrame(animate)
   map.update(time)
 
+	controls.update()
   scene.update()
 
 	map.draw.ctx.save()
@@ -183,6 +227,7 @@ function animate(time){
 
 	map.draw.coords()
 	map.draw.mouse(map.ui.mouse.cursor)
+	map.draw.camera(scene.camera)
   polyline()
 
 	map.draw.ctx.restore()