firstHEADmaster

2 files changed, 295 insertions, 0 deletions

diff --git a/assets/javascripts/mx/extensions/mx.scene.js b/assets/javascripts/mx/extensions/mx.scene.js
new file mode 100644
index 0000000..8f11fb0
--- /dev/null
+++ b/assets/javascripts/mx/extensions/mx.scene.js
@@ -0,0 +1,165 @@
+// NOTE
+//
+// This is not a fully functional 3d scene as you might expect.
+// The camera can only do pitch (rotationX) and yaw (rotationY), but no roll (rotationZ)
+// because I haven't implemented alternative euler orders or quaternions.
+//
+// For serious 3D scenes with more functionalities you should use
+// THREE.js with CSS3D Renderer.
+
+MX.Camera = MX.Object3D.extend({
+
+	init: function(){
+		this.el = null
+		this.type = "Camera"
+	},
+
+	move: function(s){
+		for (var i in s) {
+			this[i] = s[i]
+		}
+	},
+	
+	toString: function(){
+		var params = "x y z rotationX rotationY".split(" ")
+		return this.__toString(params, "scene.camera.move")
+	},
+
+  getCameraEuler: function (target) {
+		var dx = target.x - this.x,
+				dy = target.y - this.y,
+				dz = target.z - this.z
+				r = {}
+		r.y = Math.atan2(-dx, dz)
+		r.x = Math.atan2(-dy, Math.sqrt(dx*dx + dz*dz))
+		r.z = 0
+		if (MX.rotationUnit === 'deg') {
+				r.x = MX.toDeg(r.x)
+				r.y = MX.toDeg(r.y)
+		}
+		return r
+	}
+
+})
+
+MX.Scene = (function () {
+
+    var add = MX.Object3D.prototype.add,
+        remove = MX.Object3D.prototype.remove
+
+    function Scene () {
+
+        this.el = document.createElement('div')
+        this.el.classList.add('mx-scene')
+
+        var s = this.el.style
+
+        s[MX.transformProp] = 'preserve-3d'
+
+        s.webkitPerspectiveOrigin = '50% 50%'
+        s.mozPerspectiveOrigin = '50% 50%'
+        s.perspectiveOrigin = '50% 50%'
+
+        s.webkitUserSelect = 'none'
+        s.mozUserSelect = 'none'
+        s.userSelect = 'none'
+
+        s.overflow = 'hidden'
+
+        this.inner = new MX.Object3D().addTo(this.el)
+        this.inner.el.style.width = '0'
+        this.inner.el.style.height = '0'
+
+        var self = this
+        var width, height, perspective
+
+        Object.defineProperty(this, 'width', {
+            get: function () {
+                return width
+            },
+            set: function (val) {
+                width = val
+                self.el.style.width = val + 'px'
+            }
+        })
+
+        Object.defineProperty(this, 'height', {
+            get: function () {
+                return height
+            },
+            set: function (val) {
+                height = val
+                self.el.style.height = val + 'px'
+            }
+        })
+
+        Object.defineProperty(this, 'perspective', {
+            get: function () {
+                return perspective
+            },
+            set: function (val) {
+                perspective = val
+                self.el.style[MX.perspectiveProp] = val + 'px'
+                self.inner.z = -val - self.camera.z
+                self.inner.rotationOrigin.z = -val
+            }
+        })
+
+        var cam = this.camera = new MX.Camera()
+
+        this.inner.rotationOrigin = { x:0, y:0, z:0 }
+
+        this.perspective = 0
+    }
+
+    Scene.prototype = {
+
+        constructor: Scene,
+
+        add: function () {
+            add.apply(this.inner, arguments)
+            return this
+        },
+
+        remove: function () {
+            remove.apply(this.inner, arguments)
+            return this
+        },
+
+        addTo: function (target) {
+            if (typeof target === 'string') {
+                target = document.querySelector(target)
+            }
+            if (target instanceof HTMLElement && target.appendChild) {
+                target.appendChild(this.el)
+            } else {
+                console.warn('You can only add a Scene to an HTML element.')
+            }
+            return this
+        },
+
+        update: function () {
+            // update inner based on camera
+
+            var i = this.inner,
+                c = this.camera
+
+            c.update()
+
+            i.z = -this.perspective - c.z
+            i.x = -c.x
+            i.y = -c.y
+
+            i.rotationX = -c.rotationX
+            i.rotationY = -c.rotationY
+            //i.rotationZ = -c.rotationZ
+
+            i.update()
+            return this
+        },
+
+    }
+
+    return Scene
+
+})()
\ No newline at end of file
diff --git a/assets/javascripts/mx/extensions/mx.unclampedOrbitCamera.js b/assets/javascripts/mx/extensions/mx.unclampedOrbitCamera.js
new file mode 100644
index 0000000..28b1aac
--- /dev/null
+++ b/assets/javascripts/mx/extensions/mx.unclampedOrbitCamera.js
@@ -0,0 +1,130 @@
+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
+		wheelSensitivity: 10,
+		ease: 10,
+		wheelEase: 10,
+	})
+	var rx, ry, radius, px, py, epsilon = 1e-10
+	exports.dragging = false
+	exports.init = function(){
+    ry = opt.rotationY
+    rx = opt.rotationX
+    radius = opt.radius
+    exports.wheel = new wheel({
+			el: opt.el,
+			update: function(e, delta){
+				opt.radius = clamp( opt.radius + delta * opt.wheelSensitivity, opt.radiusRange[0], opt.radiusRange[1] )
+			},
+		})
+		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)
+		window.addEventListener("mousemove", move)
+		window.addEventListener("mouseup", up)
+		opt.el.addEventListener("touchstart", touch(down))
+		window.addEventListener("touchmove", touch(move))
+		window.addEventListener("touchend", touch(up))
+		exports.wheel.unlock()
+	}
+	exports.unbind = function(){
+		if (! bound) return;
+		bound = false
+		opt.el.removeEventListener("mousedown", down)
+		window.removeEventListener("mousemove", move)
+		window.removeEventListener("mouseup", up)
+		exports.wheel.lock()
+	}
+	function cancelable (fn) {
+	  return function(e){
+	    e.preventDefault()
+	    fn(e)
+	  }
+	}
+  function touch (fn){
+    return function(e){
+      fn(e.touches[0])
+    }
+  }
+	function down (e) {
+	  px = e.pageX
+	  py = e.pageY
+	  exports.dragging = true
+	}
+	function move (e) {
+	  if (! exports.dragging) return
+	  exports.delta(px- e.pageX, py - e.pageY)
+	  px = e.pageX
+	  py = e.pageY
+	}
+	function up (e) {
+	  exports.dragging = false
+	}
+	exports.delta = function(x,y){
+	  opt.rotationY += x/window.innerWidth * opt.sensitivity
+	  opt.rotationX = opt.rotationX + y/window.innerHeight * opt.sensitivity
+	}
+	exports.move = function(y, x){
+	  opt.rotationY = y
+	  if (typeof x == "number") { opt.rotationX = x }
+	}
+	exports.zoom = function(r){
+	  opt.radius = r
+	}
+	exports.setZoom = function(r){
+	  radius = opt.radius = r
+	}
+	exports.zoomPercent = function(n){
+	  opt.radius = lerp(n, opt.radiusRange[0], opt.radiusRange[1])
+	}
+	exports.zoomDelta = function(r){
+	  opt.radius += r
+	}
+	exports.pause = function(){
+	  var sy = sign(opt.rotationY-ry)
+	  var sx = sign(opt.rotationX-rx)
+	  opt.rotationY = ry + sy * 0.1
+	  opt.rotationX = rx + sx * 0.1
+	}
+  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
+	  }
+	  if (abs(radius - opt.radius) > epsilon) {
+	    radius = avg(radius, opt.radius, opt.wheelEase)
+	  }
+	  else {
+	    radius = opt.radius
+	  }
+		opt.camera.x = opt.center.x + radius * sin(rx) * cos(ry)
+		opt.camera.z = opt.center.y + radius * sin(rx) * sin(ry)
+		opt.camera.y = opt.center.z + radius * cos(rx)
+ 		opt.camera.rotationX = PI/2 - rx
+ 		opt.camera.rotationY = ry + PI/2
+	}
+	return exports
+}