partitioning client and serveR

10 files changed, 796 insertions, 0 deletions

diff --git a/client/assets/javascripts/mx/primitives/mx.box.js b/client/assets/javascripts/mx/primitives/mx.box.js
new file mode 100644
index 0000000..dfe3f5e
--- /dev/null
+++ b/client/assets/javascripts/mx/primitives/mx.box.js
@@ -0,0 +1,62 @@
+MX.Box = MX.Object3D.extend({
+
+    // this will be called within the contructor
+    init: function (size, color, borderColor) {
+
+				this.type = "Box"
+		
+        size = size || 100
+        color = color || 'rgba(0, 255, 122, .1)'
+        borderColor = borderColor || '#0f3'
+
+        // an Object3D's associated DOM node is the "el" property
+        this.el.classList.add('box')
+
+        var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2)
+
+        var top = this.top = new MX.Object3D('.face')
+        top.rotationX = angle
+        top.y = size / 2
+
+        var bottom = this.bottom = new MX.Object3D('.face')
+        bottom.rotationX = -angle
+        bottom.y = -size / 2
+
+        var left = this.left = new MX.Object3D('.face')
+        left.rotationY = -angle
+        left.x = -size / 2
+
+        var right = this.right = new MX.Object3D('.face')
+        right.rotationY = angle
+        right.x = size / 2
+
+        var front = this.front = new MX.Object3D('.face')
+        front.z = -size / 2
+
+        var back = this.back = new MX.Object3D('.face')
+        back.rotationY = angle * 2
+        back.z = size / 2
+
+        // adding children, must also be instances of Object3D
+        this.add(top, bottom, left, right, front, back)
+
+        this.children.forEach(function (face) {
+            face.width = size - 2
+            face.height = size - 2
+            face.el.style.backgroundColor = color
+            face.el.style.border = '1px solid ' + borderColor
+        })
+
+        // this applies the updated CSS style
+        // required for any change to take effect
+        // when a parent object's update() is called
+        // all its children will be updated as well
+        this.update()
+
+        // if this object's children won't move by themselves
+        this.updateChildren = false
+    }
+
+    // other properties will be mixed into the prototype of the new constructor
+
+})
\ No newline at end of file
diff --git a/client/assets/javascripts/mx/primitives/mx.boxDimensions.js b/client/assets/javascripts/mx/primitives/mx.boxDimensions.js
new file mode 100644
index 0000000..f3edb13
--- /dev/null
+++ b/client/assets/javascripts/mx/primitives/mx.boxDimensions.js
@@ -0,0 +1,154 @@
+MX.BoxDimensions = MX.Object3D.extend({
+
+	// this will be called within the contructor
+	init: function (opt) {
+
+		var base = this
+
+		this.type = "BoxDimensions"
+		
+		var id = this.id = opt.id || guid()
+		this.x = opt.x || 0
+		this.y = opt.y || 0
+		this.z = opt.z || 0
+		// this.scale = opt.scale || 1
+		var scale = opt.scale || 1
+		this.rotationX = opt.rotationX || 0
+		this.rotationY = opt.rotationY || 0
+		this.rotationZ = opt.rotationZ || 0
+		var width = this.width = opt.width || 100
+		var height = this.height = opt.height || 100
+		var depth = this.depth = opt.depth || 100
+		var color = this.color = opt.color || 'rgba(0, 255, 122, .1)'
+		var backgroundImage = this.backgroundImage = opt.backgroundImage;
+		var borderColor = this.borderColor = opt.borderColor || '#0f3'
+		var borderWidth = this.borderWidth = typeof opt.borderWidth !== 'undefined' ? opt.borderWidth : 3;
+		var borderRadius = this.borderRadius = typeof opt.borderRadius !== 'undefined' ? opt.borderRadius : undefined;
+		var sides = this.sides = opt.sides || "top bottom left right front back"
+		var className = this.className = opt.className || null
+
+		// an Object3D's associated DOM node is the "el" property
+		this.el.classList.add('box')
+
+		var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2)
+
+		this.top = this.bottom = this.left = this.right = this.front = this.back = null
+		if (-1 != sides.indexOf("top")) {
+			var top = this.top = new MX.Object3D('.face.top')
+			top.rotationX = angle
+			top.width = width
+			top.height = depth
+			top.y = height * scale
+			top.scale = scale
+			this.add(top)
+		}
+		if (-1 != sides.indexOf("bottom")) {
+			var bottom = this.bottom = new MX.Object3D('.face.bottom')
+			bottom.rotationX = -angle
+			bottom.width = width
+			bottom.height = depth
+			bottom.y = 0
+			bottom.scale = scale
+			this.add(bottom)
+		}
+		if (-1 != sides.indexOf("left")) {
+			var left = this.left = new MX.Object3D('.face.left')
+			left.rotationY = -angle
+			left.width = depth
+			left.height = height
+			left.x = -width/2 * scale
+			left.y = height/2 * scale
+			left.scale = scale
+			this.add(left)
+		}
+		if (-1 != sides.indexOf("right")) {
+			var right = this.right = new MX.Object3D('.face.right')
+			right.rotationY = angle
+			right.width = depth
+			right.height = height
+			right.x = width/2 * scale
+			right.y = height/2 * scale
+			right.scale = scale
+			this.add(right)
+		}
+		if (-1 != sides.indexOf("front")) {
+			var front = this.front = new MX.Object3D('.face.front')
+			front.width = width
+			front.height = height
+			front.z = -depth/2 * scale
+			front.y = height/2 * scale
+			front.scale = scale
+			this.add(front)
+		}
+		if (-1 != sides.indexOf("back")) {
+			var back = this.back = new MX.Object3D('.face.back')
+			back.width = width
+			back.height = height
+			back.rotationY = angle * 2
+			back.z = depth/2 * scale
+			back.y = height/2 * scale
+			back.scale = scale
+			this.add(back)
+		}
+
+		this.children.forEach(function (face) {
+			if (borderRadius) {
+				face.el.style.borderRadius = borderRadius + "px"
+			}
+			if (className) {
+				face.el.classList.add(className)
+			}
+			else {
+				if (backgroundImage) {
+					face.el.style.backgroundImage = "url(" + backgroundImage + ")"
+				}
+				else if (color) {
+					face.el.style.backgroundColor = color
+				}
+				if (borderWidth) {
+					face.el.style.border = borderWidth + 'px solid ' + borderColor
+				}
+			}
+		})
+
+		// bottom.el.style.border = "0"
+
+		// this applies the updated CSS style
+		// required for any change to take effect
+		// when a parent object's update() is called
+		// all its children will be updated as well
+		this.update()
+
+		// if this object's children won't move by themselves
+		this.updateChildren = true
+
+		this.setWidth = function(w){
+			base.width = top.width = bottom.width = front.width = back.width = w
+			left.x = -w/2
+			right.x = w/2
+			base.dirty = true
+		}
+		this.setHeight = function(h){
+			base.height = left.height = right.height = front.height = back.height = h
+			bottom.y = 0
+			left.y = right.y = front.y = back.y = h/2
+			top.y = h
+			base.dirty = true
+		}
+		this.setDepth = function(d){
+			base.depth = top.height = bottom.height = left.width = right.width = d
+			front.z = -d/2
+			back.z = d/2
+			base.dirty = true
+		}
+
+	},
+
+	toString: function(){
+		var params = "id width height depth x y z rotationX rotationY scale color borderColor borderWidth backgroundImage borderRadius sides".split(" ")
+		return this.__toString(params)
+	},
+
+	// other properties will be mixed into the prototype of the new constructor
+
+})
\ No newline at end of file
diff --git a/client/assets/javascripts/mx/primitives/mx.coords.js b/client/assets/javascripts/mx/primitives/mx.coords.js
new file mode 100644
index 0000000..80b148c
--- /dev/null
+++ b/client/assets/javascripts/mx/primitives/mx.coords.js
@@ -0,0 +1,61 @@
+MX.Coords = (function () {
+
+    var colors = {
+        x: '#f33',
+        y: '#3f3',
+        z: '#66f'
+    }
+
+    var Axis = MX.Object3D.extend({
+        init: function (axis, size) {
+
+            var label = document.createElement('span')
+            label.textContent = axis.toUpperCase()
+            label.style.position = 'absolute'
+            label.style.right = '0px'
+            label.style.bottom = '3px'
+            label.style.fontSize = Math.round(size / 10) + 'px'
+            this.el.appendChild(label)
+
+            var faceA = new MX.Object3D(),
+                faceB = new MX.Object3D()
+            faceA.rotationX = 90
+            this.add(faceA, faceB)
+
+            this.el.style.color =
+            faceA.el.style.backgroundColor = 
+            faceB.el.style.backgroundColor = colors[axis]
+
+            this.width =
+            faceA.width =
+            faceB.width = size
+
+            this.height =
+            faceA.height =
+            faceB.height = Math.round(size / 100)
+
+            var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2)
+
+            if (axis === 'y') {
+                this.rotationZ = -angle
+            } else if (axis === 'z') {
+                this.rotationY = angle
+            }
+        }
+    })
+
+    var Coords = MX.Object3D.extend({
+        init: function (size) {
+            size = size || 100
+            var x = new Axis('x', size),
+                y = new Axis('y', size),
+                z = new Axis('z', size)
+            this.add(x, y, z)
+            this.update()
+            this.updateChildren = false
+        }
+    })
+
+    return Coords
+
+})()
\ No newline at end of file
diff --git a/client/assets/javascripts/mx/primitives/mx.cutout.js b/client/assets/javascripts/mx/primitives/mx.cutout.js
new file mode 100644
index 0000000..9d9043f
--- /dev/null
+++ b/client/assets/javascripts/mx/primitives/mx.cutout.js
@@ -0,0 +1,66 @@
+MX.Cutout = MX.Object3D.extend({
+  init: function (ops) {
+  
+  	this.type = "Cutout"
+
+    var layer = this
+    layer.width = 0
+    layer.height = 0
+
+    if (ops.src) this.loadTexture(ops)
+
+		if (ops.texture) {
+		}
+		else if (ops.classname) {
+			layer.el.classList.add(ops.classname)
+		}
+		else {
+		}
+		layer.el.style.backgroundRepeat = 'no-repeat'
+
+    this.dirty = true
+    this.updateChildren = true
+    this.update()
+  },
+
+  loadTexture: function(ops){
+    var layer = this
+    var image = new Image()
+    var pattern = ops.pattern
+    var texture = ops.texture
+    
+    image.onload = function(){
+			var canvas = document.createElement("canvas")
+			var ctx = canvas.getContext('2d')
+
+			layer.width = canvas.width = image.naturalWidth
+			layer.height = canvas.height = image.naturalHeight
+
+			ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
+			ctx.globalCompositeOperation = "source-in"
+			
+			if (texture) {
+				ctx.fillStyle = ctx.createPattern(texture, 'repeat')
+				ctx.fillRect(0, 0, canvas.width, canvas.height)
+			}
+			if (pattern) {
+				ctx.fillStyle = ctx.createPattern(pattern, 'repeat')
+				ctx.fillRect(0, 0, canvas.width, canvas.height)
+			}
+
+			layer.scale = ops.scale || 1
+			layer.x = ops.x || 0
+			layer.y = (ops.y || 0) + layer.height/2 + 1
+			layer.z = ops.z || 0
+			layer.rotationX = ops.rotationX || 0
+			layer.rotationY = ops.rotationY || 0
+			layer.el.appendChild(canvas)
+
+			layer.el.classList.add('image')
+			ops.className && layer.el.classList.add(ops.className)
+			layer.dirty = true
+			layer.update()
+    }
+    image.src = ops.src;
+  }
+})
diff --git a/client/assets/javascripts/mx/primitives/mx.face.js b/client/assets/javascripts/mx/primitives/mx.face.js
new file mode 100644
index 0000000..ac47ab4
--- /dev/null
+++ b/client/assets/javascripts/mx/primitives/mx.face.js
@@ -0,0 +1,41 @@
+MX.Face = MX.Object3D.extend({
+
+    // this will be called within the contructor
+    init: function (size, color, borderColor) {
+
+        size = size || 100
+        color = color || 'rgba(0, 255, 122, .1)'
+        borderColor = borderColor || '#0f3'
+
+        // an Object3D's associated DOM node is the "el" property
+        this.el.classList.add('face')
+
+        var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2)
+
+        var top = this.top = new MX.Object3D('.face')
+        top.rotationX = angle
+        top.y = size / 2
+
+        // adding children, must also be instances of Object3D
+        this.add(top)
+
+        this.children.forEach(function (face) {
+            face.width = size - 2
+            face.height = size - 2
+            face.el.style.backgroundColor = color
+            face.el.style.border = '1px solid ' + borderColor
+        })
+
+        // this applies the updated CSS style
+        // required for any change to take effect
+        // when a parent object's update() is called
+        // all its children will be updated as well
+        this.update()
+
+        // if this object's children won't move by themselves
+        this.updateChildren = false
+    }
+
+    // other properties will be mixed into the prototype of the new constructor
+
+})
diff --git a/client/assets/javascripts/mx/primitives/mx.image.js b/client/assets/javascripts/mx/primitives/mx.image.js
new file mode 100644
index 0000000..d1e292d
--- /dev/null
+++ b/client/assets/javascripts/mx/primitives/mx.image.js
@@ -0,0 +1,69 @@
+MX.Image = MX.Object3D.extend({
+  init: function (ops) {
+  
+  	this.type = "Image"
+
+    var layer = this
+    layer.width = 0
+    layer.height = 0
+		layer.x = ops.x || 0
+		layer.y = ops.y || 0
+		layer.z = ops.z || 0
+		layer.backface = ops.backface || false
+		
+		if (layer.backface) {
+			layer.el.classList.add("backface-visible")
+		}
+
+    if (ops.src) {
+    	this.loadTexture(ops)
+    }
+		
+		if (ops.className) {
+			layer.el.classList.add(ops.className)
+		}
+		layer.el.style.backgroundRepeat = 'no-repeat'
+
+    this.dirty = true
+    this.updateChildren = true
+    this.update()
+  },
+
+  loadTexture: function(ops){
+    var layer = this
+  	layer.ops = defaults(ops, layer.ops)
+    var image = new Image()
+    image.onload = function(){
+      layer.scale = layer.ops.scale || 1
+      layer.width = image.naturalWidth
+      layer.height = image.naturalHeight
+      layer.x = layer.ops.x || 0
+      layer.y = (layer.ops.y || 0) + layer.scale * layer.height/2 + 1
+      layer.z = layer.ops.z || 0
+      layer.rotationX = layer.ops.rotationX || 0
+      layer.rotationY = layer.ops.rotationY || 0
+      layer.rotationZ = layer.ops.rotationZ || 0
+      layer.el.style.backgroundImage = "url(" + image.src + ")"
+      layer.el.classList.add('image')
+      layer.dirty = true
+      layer.update()
+    }
+    image.src = ops.src;
+  },
+  
+  move: function(ops){
+  	var layer = this
+  	layer.ops = defaults(ops, layer.ops)
+  	for (var i in ops) {
+  		layer[i] = ops[i]
+  	}
+		layer.dirty = true
+		layer.update()
+  },
+
+	toString: function(){
+		var params = "id src width height depth x y z rotationX rotationY rotationZ scale".split(" ")
+		return this.__toString(params)
+	},
+
+})
diff --git a/client/assets/javascripts/mx/primitives/mx.scaleBox.js b/client/assets/javascripts/mx/primitives/mx.scaleBox.js
new file mode 100644
index 0000000..77f45e9
--- /dev/null
+++ b/client/assets/javascripts/mx/primitives/mx.scaleBox.js
@@ -0,0 +1,140 @@
+MX.ScaleBox = MX.Object3D.extend({
+
+	// this will be called within the contructor
+	init: function (opt) {
+
+		var base = this
+
+		this.type = "ScaleBox"
+		
+		var id = this.id = opt.id || guid()
+		this.x = opt.x || 0
+		this.y = opt.y || 0
+		this.z = opt.z || 0
+		this.rotationX = opt.rotationX || 0
+		this.rotationY = opt.rotationY || 0
+		this.rotationZ = opt.rotationZ || 0
+		var scale = this.scale = opt.scale || 1
+		var width = this.width = scale * (opt.width || 100)
+		var height = this.height = scale * (opt.height || 100)
+		var depth = this.depth = scale * (opt.depth || 100)
+		var color = this.color = opt.color || 'rgba(0, 255, 122, .1)'
+		var sides = this.sides = opt.sides || "top bottom left right front back"
+
+		// an Object3D's associated DOM node is the "el" property
+		this.el.classList.add('box')
+
+		var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2)
+
+		var top = this.top = new MX.Object3D('.face.top')
+		top.rotationX = angle
+		top.width = 1
+		top.height = 1
+		top.scaleX = width
+		top.scaleY = 1
+		top.scaleZ = depth
+		top.y = height
+
+		var bottom = this.bottom = new MX.Object3D('.face.bottom')
+		bottom.rotationX = -angle
+		bottom.width = 1
+		bottom.height = 1
+		bottom.scaleX = width
+		bottom.scaleY = 1
+		bottom.scaleZ = depth
+		bottom.y = 0
+
+		var left = this.left = new MX.Object3D('.face.left')
+		left.rotationY = -angle
+		left.width = 1
+		left.height = 1
+		left.scaleX = 1
+		left.scaleY = height
+		left.scaleZ = depth
+		left.x = -width/2
+		left.y = height/2
+
+		var right = this.right = new MX.Object3D('.face.right')
+		right.rotationY = angle
+		right.width = 1
+		right.height = 1
+		right.scaleX = 1
+		right.scaleY = height
+		right.scaleZ = depth
+		right.x = width/2
+		right.y = height/2
+
+		var front = this.front = new MX.Object3D('.face.front')
+		front.width = 1
+		front.height = 1
+		front.scaleX = width
+		front.scaleY = height
+		front.scaleZ = 1
+		front.z = -depth/2
+		front.y = height/2
+
+		var back = this.back = new MX.Object3D('.face.back')
+		back.width = 1
+		back.height = 1
+		back.scaleX = width
+		back.scaleY = height
+		back.scaleZ = 1
+		back.rotationY = angle * 2
+		back.z = depth/2
+		back.y = height/2
+
+		// adding children, must also be instances of Object3D
+		if (-1 != sides.indexOf("top")) this.add(top)
+		if (-1 != sides.indexOf("bottom")) this.add(bottom)
+		if (-1 != sides.indexOf("left")) this.add(left)
+		if (-1 != sides.indexOf("right")) this.add(right)
+		if (-1 != sides.indexOf("front")) this.add(front)
+		if (-1 != sides.indexOf("back")) this.add(back)
+
+		this.children.forEach(function (face) {
+			face.el.style.backgroundColor = color
+		})
+
+		// this applies the updated CSS style
+		// required for any change to take effect
+		// when a parent object's update() is called
+		// all its children will be updated as well
+		this.update()
+
+		// if this object's children won't move by themselves
+		this.updateChildren = true
+
+		this.setWidth = function(w){
+			base.width = top.width = bottom.width = front.width = back.width = w
+			left.x = -w/2
+			right.x = w/2
+			base.dirty = true
+		}
+		this.setHeight = function(h){
+			base.height = left.height = right.height = front.height = back.height = h
+			bottom.y = 0
+			left.y = right.y = front.y = back.y = h/2
+			top.y = h
+			base.dirty = true
+		}
+		this.setDepth = function(d){
+			base.depth = top.height = bottom.height = left.width = right.width = d
+			front.z = -d/2
+			back.z = d/2
+			base.dirty = true
+		}
+
+	},
+
+	toString: function(){
+		var params = "id width height depth x y z rotationX rotationY color sides".split(" ")
+		return this.__toString(params)
+	},
+	
+	clone: function(){
+		return new MX[this.type] (this)
+	}
+
+	// other properties will be mixed into the prototype of the new constructor
+
+})
diff --git a/client/assets/javascripts/mx/primitives/mx.tableau.js b/client/assets/javascripts/mx/primitives/mx.tableau.js
new file mode 100644
index 0000000..514e206
--- /dev/null
+++ b/client/assets/javascripts/mx/primitives/mx.tableau.js
@@ -0,0 +1,48 @@
+
+
+var Tableau = function(){
+	this.extend = extend.bind(Tableau)
+
+	function extend (props) {
+		var Super = this
+		var ExtendedTableau = function () {
+			Super.call(this)
+			props.init && props.init.apply(this, arguments)
+		}
+		ExtendedTableau.prototype = Object.create(Tableau.prototype)
+		for (var prop in props) {
+			if (props.hasOwnProperty(prop) && prop !== 'init') {
+				ExtendedTableau.prototype[prop] = props[prop]
+			}
+		}
+		ExtendedTableau.extend = extend.bind(ExtendedTableau)
+		return ExtendedTableau
+	}
+}
+
+Tableau.prototype.init = function(opt){}
+Tableau.prototype.animate = function(t){}
+Tableau.prototype.show = function(){}
+Tableau.prototype.hide = function(){}
+
+MX.Tableau = new Tableau()
+MX.Tableaux = {}
+
+/*
+
+MX.Tableaux.Foo = MX.Tableau.extend({
+	// this will be called within the contructor
+	init: function (opt) {
+	},
+	
+	show: function(){
+	},
+	
+	hide: function(){
+	},
+	
+	animate: function() {
+	}
+})
+
+*/
diff --git a/client/assets/javascripts/mx/primitives/mx.text.js b/client/assets/javascripts/mx/primitives/mx.text.js
new file mode 100644
index 0000000..0c278a9
--- /dev/null
+++ b/client/assets/javascripts/mx/primitives/mx.text.js
@@ -0,0 +1,34 @@
+MX.Text = MX.Object3D.extend({
+  init: function (ops) {
+
+		this.type = "Text"
+		
+    var layer = new MX.Object3D('text')
+    layer.width = ops.width || 100
+    layer.height = ops.height || 50
+    layer.x = ops.x || 0
+    layer.y = ops.y || 0
+    layer.z = ops.z || 0
+    layer.scale = ops.scale || 1
+    layer.el.innerHTML = ops.value || ""
+    if (ops.id) layer.el.id = ops.id;
+    if (ops.background) layer.el.style.background = ops.background;
+    if (ops.color) layer.el.style.color = ops.color;
+    if (ops.fontSize) layer.el.style.fontSize = ops.fontSize + "px";
+
+    this.add(layer)
+
+    this.children.forEach(function (c, i) {
+      if (ops.classname) {
+        c.el.classList.add(ops.classname)
+      }
+      else {
+      }
+      c.el.style.backgroundRepeat = 'no-repeat'
+    })
+
+    this.dirty = true
+    this.updateChildren = true
+    this.update()
+  }
+})
diff --git a/client/assets/javascripts/mx/primitives/mx.texturedBox.js b/client/assets/javascripts/mx/primitives/mx.texturedBox.js
new file mode 100644
index 0000000..daec2d8
--- /dev/null
+++ b/client/assets/javascripts/mx/primitives/mx.texturedBox.js
@@ -0,0 +1,121 @@
+// Creates a box using a given texture image.
+// Uses a texture image like this:
+//
+//             ---------- ----------
+//            |          |          |
+//            |   top    |  bottom  |
+//            |          |          |
+//  ---------- ---------- ---------- ----------
+// |          |          |          |          |
+// |   left   |  front   |  right   |   back   |
+// |          |          |          |          |
+//  ---------- ---------- ---------- ----------
+//
+// See `examples/images/skins/` for some minecraft skin examples.
+
+// Options:
+//
+//   - {number} `width`
+//   - {number} `height`
+//   - {number} `depth`
+//   - {string} `texture` path to texture image
+//   - {string} `classname` class to be added to dom element
+
+MX.TexturedBox = MX.Object3D.extend({
+
+    init: function (ops) {
+
+				this.type = "TexturedBox"
+
+        if (!ops.width || !ops.height || !ops.depth || (!ops.texture && !ops.classname)) {
+            console.warn('TextureBox: missing arguments')
+            return
+        }
+
+        // faces
+        var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2),
+            offsetX = ops.offset ? (ops.offset.x || 0) : 0,
+            offsetY = ops.offset ? (ops.offset.y || 0) : 0,
+            overlap = ops.overlap ? ops.overlap : 0
+        var multiTexture = typeof ops.texture == "object";
+
+        var top = this.top = new MX.Object3D()
+        top.width = ops.width
+        top.height = ops.depth
+        top.rotationX = angle
+        top.y = ops.height / 2 - overlap
+        if (!multiTexture)
+        top.el.style.backgroundPosition =
+            (-(offsetX + ops.depth) + 'px ') +
+            (-offsetY + 'px')
+
+        var bottom = this.bottom = new MX.Object3D()
+        bottom.width = ops.width
+        bottom.height = ops.depth
+        bottom.rotationX = -angle
+        bottom.y = -ops.height / 2 + overlap
+        if (!multiTexture)
+        bottom.el.style.backgroundPosition =
+            (-(offsetX + ops.depth + ops.width) + 'px ') +
+            (-offsetY + 'px')
+
+        var left = this.left = new MX.Object3D()
+        left.width = ops.depth
+        left.height = ops.height
+        left.rotationY = -angle
+        left.x = -ops.width / 2 + overlap
+        if (!multiTexture)
+        left.el.style.backgroundPosition =
+            (-offsetX + 'px ') +
+            (-(offsetY + ops.depth) + 'px')
+
+        var right = this.right = new MX.Object3D()
+        right.width = ops.depth
+        right.height = ops.height
+        right.rotationY = angle
+        right.x = ops.width / 2 - overlap
+        if (!multiTexture)
+        right.el.style.backgroundPosition =
+            (-(offsetX + ops.depth + ops.width) + 'px ') +
+            (-(offsetY + ops.depth) + 'px')
+
+        var front = this.front = new MX.Object3D()
+        front.width = ops.width
+        front.height = ops.height
+        front.z = -ops.depth / 2 + overlap
+        if (!multiTexture)
+        front.el.style.backgroundPosition =
+            (-(offsetX + ops.depth) + 'px ') +
+            (-(offsetY + ops.depth) + 'px')
+
+        var back = this.back = new MX.Object3D()
+        back.width = ops.width
+        back.height = ops.height
+        back.rotationY = angle * 2
+        back.z = ops.depth / 2 - overlap
+        if (!multiTexture)
+        back.el.style.backgroundPosition =
+            (-(offsetX + ops.depth * 2 + ops.width) + 'px ') +
+            (-(offsetY + ops.depth) + 'px')
+
+        this.add(top, bottom, left, right, front, back)
+
+        this.children.forEach(function (c,i) {
+            if (multiTexture) {
+                c.el.style.backgroundImage = 'url(' + ops.texture[i] + ')'
+            }
+            else if (ops.texture) {
+                c.el.style.backgroundImage = 'url(' + ops.texture + ')'
+            }
+            if (ops.classname) {
+                c.el.classList.add(ops.classname)
+            }
+            c.el.style.backgroundRepeat = 'no-repeat'
+        })
+
+        this.update()
+        this.updateChildren = false
+
+    }
+
+})