diff options
Diffstat (limited to 'site/public/assets/javascripts/mx/extensions/mx.scene.js')
| -rw-r--r-- | site/public/assets/javascripts/mx/extensions/mx.scene.js | 165 |
1 files changed, 0 insertions, 165 deletions
diff --git a/site/public/assets/javascripts/mx/extensions/mx.scene.js b/site/public/assets/javascripts/mx/extensions/mx.scene.js deleted file mode 100644 index 8f11fb0..0000000 --- a/site/public/assets/javascripts/mx/extensions/mx.scene.js +++ /dev/null @@ -1,165 +0,0 @@ -// 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 |