blob: daec2d85a3ec246bbffd8c05daf7d242d1690a0f (
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
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
}
})
|
