blob: d1d507d72bf4a43da060b5e501db3cad68589a3b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
MX.BoxDimensions = MX.Object3D.extend({
// this will be called within the contructor
init: function (opt) {
this.type = "BoxDimensions"
this.opt = opt
var width = opt.width || 100
var height = opt.height || 100
var depth = opt.depth || 100
var color = this.color = opt.color || 'rgba(0, 255, 122, .1)'
var borderColor = this.borderColor = opt.borderColor || '#0f3'
var sides = this.sides = opt.sides || "top bottom left right 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 = width
top.height = depth
top.y = height
var bottom = this.bottom = new MX.Object3D('.face.bottom')
bottom.rotationX = -angle
bottom.width = width
bottom.height = depth
bottom.y = 0
var left = this.left = new MX.Object3D('.face.left')
left.rotationY = -angle
left.width = depth
left.height = height
left.x = -width/2
left.y = height/2
var right = this.right = new MX.Object3D('.face.right')
right.rotationY = angle
right.width = depth
right.height = height
right.x = width/2
right.y = height/2
var front = this.front = new MX.Object3D('.face.front')
front.width = width
front.height = height
front.z = -depth/2
front.y = height/2
var back = this.back = new MX.Object3D('.face.back')
back.width = width
back.height = height
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
face.el.style.border = '3px 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 = false
}
// other properties will be mixed into the prototype of the new constructor
})
|
