stowing UI stuff in empty branchui-mocks

1 files changed, 161 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..c1501f5
--- /dev/null
+++ b/assets/javascripts/mx/extensions/mx.scene.js
@@ -0,0 +1,161 @@
+// 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.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.Object3D()
+        cam.el = null
+
+        // cam's lookAt is a bit different
+        // ignoring rotationZ
+        cam.getLookAtEuler = getCameraEuler.bind(cam)
+
+        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
+        },
+
+				sizeToScreen: function(){
+					scene.width = window.innerWidth
+					scene.height = window.innerHeight
+					if (is_mobile) {
+						scene.perspective = min(window.innerWidth, window.innerHeight) - 80
+					}
+					else {
+						scene.perspective = min(window.innerWidth, window.innerHeight)
+					}
+				},
+
+    }
+
+    function getCameraEuler (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
+    }
+
+    return Scene
+
+})()
\ No newline at end of file