Merge pull request #383 from makc/three.js

Three.js

spine-threejs/README.md

@@ -0,0 +1,3 @@
+# spine-threejs
+
+The spine-threejs runtime is so far just an example of how the integration could be done. NOT stable!

spine-threejs/example/data/goblins.atlas

@@ -0,0 +1,285 @@
+
+goblins.png
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+spear
+  rotate: false
+  xy: 2, 142
+  size: 22, 368
+  orig: 22, 368
+  offset: 0, 0
+  index: -1
+goblingirl/head
+  rotate: false
+  xy: 26, 429
+  size: 103, 81
+  orig: 103, 81
+  offset: 0, 0
+  index: -1
+goblin/head
+  rotate: false
+  xy: 26, 361
+  size: 103, 66
+  orig: 103, 66
+  offset: 0, 0
+  index: -1
+goblin/torso
+  rotate: false
+  xy: 131, 414
+  size: 68, 96
+  orig: 68, 96
+  offset: 0, 0
+  index: -1
+goblingirl/torso
+  rotate: false
+  xy: 26, 263
+  size: 68, 96
+  orig: 68, 96
+  offset: 0, 0
+  index: -1
+dagger
+  rotate: false
+  xy: 26, 153
+  size: 26, 108
+  orig: 26, 108
+  offset: 0, 0
+  index: -1
+goblin/right-lower-leg
+  rotate: false
+  xy: 201, 434
+  size: 36, 76
+  orig: 36, 76
+  offset: 0, 0
+  index: -1
+goblingirl/right-lower-leg
+  rotate: false
+  xy: 54, 185
+  size: 36, 76
+  orig: 36, 76
+  offset: 0, 0
+  index: -1
+goblin/left-upper-leg
+  rotate: false
+  xy: 96, 286
+  size: 33, 73
+  orig: 33, 73
+  offset: 0, 0
+  index: -1
+goblin/pelvis
+  rotate: false
+  xy: 131, 369
+  size: 62, 43
+  orig: 62, 43
+  offset: 0, 0
+  index: -1
+goblingirl/pelvis
+  rotate: false
+  xy: 131, 324
+  size: 62, 43
+  orig: 62, 43
+  offset: 0, 0
+  index: -1
+goblin/right-foot
+  rotate: false
+  xy: 131, 289
+  size: 63, 33
+  orig: 63, 33
+  offset: 0, 0
+  index: -1
+goblin/left-lower-leg
+  rotate: false
+  xy: 2, 70
+  size: 33, 70
+  orig: 33, 70
+  offset: 0, 0
+  index: -1
+goblin/right-upper-leg
+  rotate: false
+  xy: 2, 5
+  size: 34, 63
+  orig: 34, 63
+  offset: 0, 0
+  index: -1
+goblingirl/left-lower-leg
+  rotate: false
+  xy: 195, 342
+  size: 33, 70
+  orig: 33, 70
+  offset: 0, 0
+  index: -1
+goblingirl/left-upper-leg
+  rotate: false
+  xy: 37, 81
+  size: 33, 70
+  orig: 33, 70
+  offset: 0, 0
+  index: -1
+goblingirl/right-upper-leg
+  rotate: false
+  xy: 38, 16
+  size: 34, 63
+  orig: 34, 63
+  offset: 0, 0
+  index: -1
+goblin/eyes-closed
+  rotate: false
+  xy: 38, 2
+  size: 34, 12
+  orig: 34, 12
+  offset: 0, 0
+  index: -1
+goblin/undies
+  rotate: false
+  xy: 54, 154
+  size: 36, 29
+  orig: 36, 29
+  offset: 0, 0
+  index: -1
+goblin/right-arm
+  rotate: false
+  xy: 72, 102
+  size: 23, 50
+  orig: 23, 50
+  offset: 0, 0
+  index: -1
+goblin/left-foot
+  rotate: false
+  xy: 131, 256
+  size: 65, 31
+  orig: 65, 31
+  offset: 0, 0
+  index: -1
+goblingirl/right-arm
+  rotate: false
+  xy: 196, 290
+  size: 28, 50
+  orig: 28, 50
+  offset: 0, 0
+  index: -1
+goblingirl/left-shoulder
+  rotate: false
+  xy: 226, 294
+  size: 28, 46
+  orig: 28, 46
+  offset: 0, 0
+  index: -1
+goblin/left-arm
+  rotate: false
+  xy: 198, 253
+  size: 37, 35
+  orig: 37, 35
+  offset: 0, 0
+  index: -1
+goblingirl/left-foot
+  rotate: false
+  xy: 92, 223
+  size: 65, 31
+  orig: 65, 31
+  offset: 0, 0
+  index: -1
+goblingirl/right-foot
+  rotate: false
+  xy: 92, 188
+  size: 63, 33
+  orig: 63, 33
+  offset: 0, 0
+  index: -1
+goblin/undie-straps
+  rotate: false
+  xy: 92, 167
+  size: 55, 19
+  orig: 55, 19
+  offset: 0, 0
+  index: -1
+goblingirl/left-arm
+  rotate: false
+  xy: 159, 219
+  size: 37, 35
+  orig: 37, 35
+  offset: 0, 0
+  index: -1
+goblin/right-shoulder
+  rotate: false
+  xy: 97, 120
+  size: 39, 45
+  orig: 39, 45
+  offset: 0, 0
+  index: -1
+goblingirl/right-shoulder
+  rotate: false
+  xy: 198, 206
+  size: 39, 45
+  orig: 39, 45
+  offset: 0, 0
+  index: -1
+goblin/left-hand
+  rotate: false
+  xy: 157, 176
+  size: 36, 41
+  orig: 36, 41
+  offset: 0, 0
+  index: -1
+goblin/neck
+  rotate: false
+  xy: 195, 163
+  size: 36, 41
+  orig: 36, 41
+  offset: 0, 0
+  index: -1
+goblingirl/undie-straps
+  rotate: false
+  xy: 97, 99
+  size: 55, 19
+  orig: 55, 19
+  offset: 0, 0
+  index: -1
+goblingirl/neck
+  rotate: false
+  xy: 138, 120
+  size: 35, 41
+  orig: 35, 41
+  offset: 0, 0
+  index: -1
+goblingirl/left-hand
+  rotate: false
+  xy: 175, 121
+  size: 35, 40
+  orig: 35, 40
+  offset: 0, 0
+  index: -1
+goblin/left-shoulder
+  rotate: false
+  xy: 212, 117
+  size: 29, 44
+  orig: 29, 44
+  offset: 0, 0
+  index: -1
+goblingirl/eyes-closed
+  rotate: false
+  xy: 154, 97
+  size: 37, 21
+  orig: 37, 21
+  offset: 0, 0
+  index: -1
+goblin/right-hand
+  rotate: false
+  xy: 193, 78
+  size: 36, 37
+  orig: 36, 37
+  offset: 0, 0
+  index: -1
+goblingirl/right-hand
+  rotate: false
+  xy: 74, 39
+  size: 36, 37
+  orig: 36, 37
+  offset: 0, 0
+  index: -1
+goblingirl/undies
+  rotate: false
+  xy: 74, 8
+  size: 36, 29
+  orig: 36, 29
+  offset: 0, 0
+  index: -1

spine-threejs/example/data/goblins.json

@@ -0,0 +1,499 @@
+{
+"bones": [
+	{ "name": "root" },
+	{ "name": "hip", "parent": "root", "x": 0.64, "y": 114.41 },
+	{ "name": "left upper leg", "parent": "hip", "length": 50.39, "x": 14.45, "y": 2.81, "rotation": -89.09 },
+	{ "name": "left lower leg", "parent": "left upper leg", "length": 49.89, "x": 56.34, "y": 0.98, "rotation": -16.65 },
+	{ "name": "left foot", "parent": "left lower leg", "length": 46.5, "x": 58.94, "y": -7.61, "rotation": 102.43 },
+	{ "name": "right upper leg", "parent": "hip", "length": 42.45, "x": -20.07, "y": -6.83, "rotation": -97.49 },
+	{ "name": "right lower leg", "parent": "right upper leg", "length": 58.52, "x": 42.99, "y": -0.61, "rotation": -14.34 },
+	{ "name": "right foot", "parent": "right lower leg", "length": 45.45, "x": 64.88, "y": 0.04, "rotation": 110.3 },
+	{ "name": "torso", "parent": "hip", "length": 85.82, "x": -6.42, "y": 1.97, "rotation": 93.92 },
+	{ "name": "neck", "parent": "torso", "length": 18.38, "x": 81.67, "y": -6.34, "rotation": -1.51 },
+	{ "name": "head", "parent": "neck", "length": 68.28, "x": 20.93, "y": 11.59, "rotation": -13.92 },
+	{ "name": "right shoulder", "parent": "torso", "length": 37.24, "x": 76.02, "y": 18.14, "rotation": 133.88 },
+	{ "name": "right arm", "parent": "right shoulder", "length": 36.74, "x": 37.6, "y": 0.31, "rotation": 36.32 },
+	{ "name": "right hand", "parent": "right arm", "length": 15.32, "x": 36.9, "y": 0.34, "rotation": 2.35 },
+	{ "name": "left shoulder", "parent": "torso", "length": 35.43, "x": 74.04, "y": -20.38, "rotation": -156.96 },
+	{ "name": "left arm", "parent": "left shoulder", "length": 35.62, "x": 37.85, "y": -2.34, "rotation": 28.16 },
+	{ "name": "left hand", "parent": "left arm", "length": 11.52, "x": 35.62, "y": 0.07, "rotation": 2.7 },
+	{ "name": "pelvis", "parent": "hip", "x": 1.41, "y": -6.57 }
+],
+"slots": [
+	{ "name": "left shoulder", "bone": "left shoulder", "attachment": "left shoulder" },
+	{ "name": "left arm", "bone": "left arm", "attachment": "left arm" },
+	{ "name": "left hand item", "bone": "left hand", "attachment": "spear" },
+	{ "name": "left hand", "bone": "left hand", "attachment": "left hand" },
+	{ "name": "left foot", "bone": "left foot", "attachment": "left foot" },
+	{ "name": "left lower leg", "bone": "left lower leg", "attachment": "left lower leg" },
+	{ "name": "left upper leg", "bone": "left upper leg", "attachment": "left upper leg" },
+	{ "name": "neck", "bone": "neck", "attachment": "neck" },
+	{ "name": "torso", "bone": "torso", "attachment": "torso" },
+	{ "name": "pelvis", "bone": "pelvis", "attachment": "pelvis" },
+	{ "name": "right foot", "bone": "right foot", "attachment": "right foot" },
+	{ "name": "right lower leg", "bone": "right lower leg", "attachment": "right lower leg" },
+	{ "name": "undie straps", "bone": "pelvis", "attachment": "undie straps" },
+	{ "name": "undies", "bone": "pelvis", "attachment": "undies" },
+	{ "name": "right upper leg", "bone": "right upper leg", "attachment": "right upper leg" },
+	{ "name": "head", "bone": "head", "attachment": "head" },
+	{ "name": "eyes", "bone": "head" },
+	{ "name": "right shoulder", "bone": "right shoulder", "attachment": "right shoulder" },
+	{ "name": "right arm", "bone": "right arm", "attachment": "right arm" },
+	{ "name": "right hand item", "bone": "right hand", "attachment": "dagger" },
+	{ "name": "right hand", "bone": "right hand", "attachment": "right hand" }
+],
+"skins": {
+	"default": {
+		"left hand item": {
+			"dagger": { "x": 7.88, "y": -23.45, "rotation": 10.47, "width": 26, "height": 108 },
+			"spear": { "x": -4.55, "y": 39.2, "rotation": 13.04, "width": 22, "height": 368 }
+		},
+		"right hand item": {
+			"dagger": { "x": 6.51, "y": -24.15, "rotation": -8.06, "width": 26, "height": 108 }
+		}
+	},
+	"goblin": {
+		"neck": {
+			"neck": { "name": "goblin/neck", "x": 10.1, "y": 0.42, "rotation": -93.69, "width": 36, "height": 41 }
+		},
+		"undies": {
+			"undies": { "name": "goblin/undies", "x": 6.3, "y": 0.12, "rotation": 0.91, "width": 36, "height": 29 }
+		},
+		"right hand": {
+			"right hand": { "name": "goblin/right-hand", "x": 7.88, "y": 2.78, "rotation": 91.96, "width": 36, "height": 37 }
+		},
+		"right arm": {
+			"right arm": { "name": "goblin/right-arm", "x": 16.44, "y": -1.04, "rotation": 94.32, "width": 23, "height": 50 }
+		},
+		"head": {
+			"head": { "name": "goblin/head", "x": 25.73, "y": 2.33, "rotation": -92.29, "width": 103, "height": 66 }
+		},
+		"left shoulder": {
+			"left shoulder": { "name": "goblin/left-shoulder", "x": 15.56, "y": -2.26, "rotation": 62.01, "width": 29, "height": 44 }
+		},
+		"left arm": {
+			"left arm": {
+				"name": "goblin/left-arm",
+				"x": 16.7,
+				"y": -1.69,
+				"scaleX": 1.057,
+				"scaleY": 1.057,
+				"rotation": 33.84,
+				"width": 37,
+				"height": 35
+			}
+		},
+		"left hand": {
+			"left hand": {
+				"name": "goblin/left-hand",
+				"x": 3.47,
+				"y": 3.41,
+				"scaleX": 0.892,
+				"scaleY": 0.892,
+				"rotation": 31.14,
+				"width": 36,
+				"height": 41
+			}
+		},
+		"right lower leg": {
+			"right lower leg": { "name": "goblin/right-lower-leg", "x": 25.68, "y": -3.15, "rotation": 111.83, "width": 36, "height": 76 }
+		},
+		"right upper leg": {
+			"right upper leg": { "name": "goblin/right-upper-leg", "x": 20.35, "y": 1.47, "rotation": 97.49, "width": 34, "height": 63 }
+		},
+		"pelvis": {
+			"pelvis": { "name": "goblin/pelvis", "x": -5.61, "y": 0.76, "width": 62, "height": 43 }
+		},
+		"left lower leg": {
+			"left lower leg": { "name": "goblin/left-lower-leg", "x": 23.58, "y": -2.06, "rotation": 105.75, "width": 33, "height": 70 }
+		},
+		"left upper leg": {
+			"left upper leg": { "name": "goblin/left-upper-leg", "x": 29.68, "y": -3.87, "rotation": 89.09, "width": 33, "height": 73 }
+		},
+		"torso": {
+			"torso": { "name": "goblin/torso", "x": 38.09, "y": -3.87, "rotation": -94.95, "width": 68, "height": 96 }
+		},
+		"right shoulder": {
+			"right shoulder": { "name": "goblin/right-shoulder", "x": 15.68, "y": -1.03, "rotation": 130.65, "width": 39, "height": 45 }
+		},
+		"right foot": {
+			"right foot": { "name": "goblin/right-foot", "x": 23.56, "y": 9.8, "rotation": 1.52, "width": 63, "height": 33 }
+		},
+		"left foot": {
+			"left foot": { "name": "goblin/left-foot", "x": 24.85, "y": 8.74, "rotation": 3.32, "width": 65, "height": 31 }
+		},
+		"undie straps": {
+			"undie straps": { "name": "goblin/undie-straps", "x": -3.87, "y": 13.1, "scaleX": 1.089, "width": 55, "height": 19 }
+		},
+		"eyes": {
+			"eyes closed": { "name": "goblin/eyes-closed", "x": 32.21, "y": -21.27, "rotation": -88.92, "width": 34, "height": 12 }
+		}
+	},
+	"goblingirl": {
+		"left upper leg": {
+			"left upper leg": { "name": "goblingirl/left-upper-leg", "x": 30.21, "y": -2.95, "rotation": 89.09, "width": 33, "height": 70 }
+		},
+		"left lower leg": {
+			"left lower leg": { "name": "goblingirl/left-lower-leg", "x": 25.02, "y": -0.6, "rotation": 105.75, "width": 33, "height": 70 }
+		},
+		"left foot": {
+			"left foot": { "name": "goblingirl/left-foot", "x": 25.17, "y": 7.92, "rotation": 3.32, "width": 65, "height": 31 }
+		},
+		"right upper leg": {
+			"right upper leg": { "name": "goblingirl/right-upper-leg", "x": 19.69, "y": 2.13, "rotation": 97.49, "width": 34, "height": 63 }
+		},
+		"right lower leg": {
+			"right lower leg": { "name": "goblingirl/right-lower-leg", "x": 26.15, "y": -3.27, "rotation": 111.83, "width": 36, "height": 76 }
+		},
+		"right foot": {
+			"right foot": { "name": "goblingirl/right-foot", "x": 23.46, "y": 9.66, "rotation": 1.52, "width": 63, "height": 33 }
+		},
+		"torso": {
+			"torso": { "name": "goblingirl/torso", "x": 36.28, "y": -5.14, "rotation": -95.74, "width": 68, "height": 96 }
+		},
+		"left shoulder": {
+			"left shoulder": { "name": "goblingirl/left-shoulder", "x": 19.8, "y": -0.42, "rotation": 61.21, "width": 28, "height": 46 }
+		},
+		"left arm": {
+			"left arm": { "name": "goblingirl/left-arm", "x": 19.64, "y": -2.42, "rotation": 33.05, "width": 37, "height": 35 }
+		},
+		"left hand": {
+			"left hand": {
+				"name": "goblingirl/left-hand",
+				"x": 4.34,
+				"y": 2.39,
+				"scaleX": 0.896,
+				"scaleY": 0.896,
+				"rotation": 30.34,
+				"width": 35,
+				"height": 40
+			}
+		},
+		"neck": {
+			"neck": { "name": "goblingirl/neck", "x": 6.16, "y": -3.14, "rotation": -98.86, "width": 35, "height": 41 }
+		},
+		"head": {
+			"head": { "name": "goblingirl/head", "x": 27.71, "y": -4.32, "rotation": -85.58, "width": 103, "height": 81 }
+		},
+		"right shoulder": {
+			"right shoulder": { "name": "goblingirl/right-shoulder", "x": 14.46, "y": 0.45, "rotation": 129.85, "width": 39, "height": 45 }
+		},
+		"right arm": {
+			"right arm": { "name": "goblingirl/right-arm", "x": 16.85, "y": -0.66, "rotation": 93.52, "width": 28, "height": 50 }
+		},
+		"right hand": {
+			"right hand": { "name": "goblingirl/right-hand", "x": 7.21, "y": 3.43, "rotation": 91.16, "width": 36, "height": 37 }
+		},
+		"pelvis": {
+			"pelvis": { "name": "goblingirl/pelvis", "x": -3.87, "y": 3.18, "width": 62, "height": 43 }
+		},
+		"undie straps": {
+			"undie straps": { "name": "goblingirl/undie-straps", "x": -1.51, "y": 14.18, "width": 55, "height": 19 }
+		},
+		"undies": {
+			"undies": { "name": "goblingirl/undies", "x": 5.4, "y": 1.7, "width": 36, "height": 29 }
+		},
+		"eyes": {
+			"eyes closed": { "name": "goblingirl/eyes-closed", "x": 28, "y": -25.54, "rotation": -87.04, "width": 37, "height": 21 }
+		}
+	}
+},
+"animations": {
+	"walk": {
+		"bones": {
+			"left upper leg": {
+				"rotate": [
+					{ "time": 0, "angle": -26.55 },
+					{ "time": 0.1333, "angle": -8.78 },
+					{ "time": 0.2333, "angle": 9.51 },
+					{ "time": 0.3666, "angle": 30.74 },
+					{ "time": 0.5, "angle": 25.33 },
+					{ "time": 0.6333, "angle": 26.11 },
+					{ "time": 0.7333, "angle": -7.7 },
+					{ "time": 0.8666, "angle": -21.19 },
+					{ "time": 1, "angle": -26.55 }
+				],
+				"translate": [
+					{ "time": 0, "x": -1.32, "y": 1.7 },
+					{ "time": 0.3666, "x": -0.06, "y": 2.42 },
+					{ "time": 1, "x": -1.32, "y": 1.7 }
+				]
+			},
+			"right upper leg": {
+				"rotate": [
+					{ "time": 0, "angle": 42.45 },
+					{ "time": 0.1333, "angle": 52.1 },
+					{ "time": 0.2333, "angle": 8.53 },
+					{ "time": 0.5, "angle": -16.93 },
+					{ "time": 0.6333, "angle": 1.89 },
+					{
+						"time": 0.7333,
+						"angle": 28.06,
+						"curve": [ 0.462, 0.11, 1, 1 ]
+					},
+					{
+						"time": 0.8666,
+						"angle": 58.68,
+						"curve": [ 0.5, 0.02, 1, 1 ]
+					},
+					{ "time": 1, "angle": 42.45 }
+				],
+				"translate": [
+					{ "time": 0, "x": 6.23, "y": 0 },
+					{ "time": 0.2333, "x": 2.14, "y": 2.4 },
+					{ "time": 0.5, "x": 2.44, "y": 4.8 },
+					{ "time": 1, "x": 6.23, "y": 0 }
+				]
+			},
+			"left lower leg": {
+				"rotate": [
+					{ "time": 0, "angle": -22.98 },
+					{ "time": 0.1333, "angle": -63.5 },
+					{ "time": 0.2333, "angle": -73.76 },
+					{ "time": 0.5, "angle": 5.11 },
+					{ "time": 0.6333, "angle": -28.29 },
+					{ "time": 0.7333, "angle": 4.08 },
+					{ "time": 0.8666, "angle": 3.53 },
+					{ "time": 1, "angle": -22.98 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0 },
+					{ "time": 0.2333, "x": 2.55, "y": -0.47 },
+					{ "time": 0.5, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 1, "x": 0, "y": 0 }
+				]
+			},
+			"left foot": {
+				"rotate": [
+					{ "time": 0, "angle": -3.69 },
+					{ "time": 0.1333, "angle": -10.42 },
+					{ "time": 0.2333, "angle": -5.01 },
+					{ "time": 0.3666, "angle": 3.87 },
+					{ "time": 0.5, "angle": -3.87 },
+					{ "time": 0.6333, "angle": 2.78 },
+					{ "time": 0.7333, "angle": 1.68 },
+					{ "time": 0.8666, "angle": -8.54 },
+					{ "time": 1, "angle": -3.69 }
+				]
+			},
+			"right shoulder": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": 5.29,
+						"curve": [ 0.264, 0, 0.75, 1 ]
+					},
+					{ "time": 0.6333, "angle": 6.65 },
+					{ "time": 1, "angle": 5.29 }
+				]
+			},
+			"right arm": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": -4.02,
+						"curve": [ 0.267, 0, 0.804, 0.99 ]
+					},
+					{
+						"time": 0.6333,
+						"angle": 19.78,
+						"curve": [ 0.307, 0, 0.787, 0.99 ]
+					},
+					{ "time": 1, "angle": -4.02 }
+				]
+			},
+			"right hand": {
+				"rotate": [
+					{ "time": 0, "angle": 8.98 },
+					{ "time": 0.6333, "angle": 0.51 },
+					{ "time": 1, "angle": 8.98 }
+				]
+			},
+			"left shoulder": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": 6.25,
+						"curve": [ 0.339, 0, 0.683, 1 ]
+					},
+					{
+						"time": 0.5,
+						"angle": -11.78,
+						"curve": [ 0.281, 0, 0.686, 0.99 ]
+					},
+					{ "time": 1, "angle": 6.25 }
+				],
+				"translate": [
+					{ "time": 0, "x": 1.15, "y": 0.23 }
+				]
+			},
+			"left hand": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": -21.23,
+						"curve": [ 0.295, 0, 0.755, 0.98 ]
+					},
+					{
+						"time": 0.5,
+						"angle": -27.28,
+						"curve": [ 0.241, 0, 0.75, 0.97 ]
+					},
+					{ "time": 1, "angle": -21.23 }
+				]
+			},
+			"left arm": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": 28.37,
+						"curve": [ 0.339, 0, 0.683, 1 ]
+					},
+					{
+						"time": 0.5,
+						"angle": 60.09,
+						"curve": [ 0.281, 0, 0.686, 0.99 ]
+					},
+					{ "time": 1, "angle": 28.37 }
+				]
+			},
+			"torso": {
+				"rotate": [
+					{ "time": 0, "angle": -10.28 },
+					{
+						"time": 0.1333,
+						"angle": -15.38,
+						"curve": [ 0.545, 0, 0.818, 1 ]
+					},
+					{
+						"time": 0.3666,
+						"angle": -9.78,
+						"curve": [ 0.58, 0.17, 0.669, 0.99 ]
+					},
+					{
+						"time": 0.6333,
+						"angle": -15.75,
+						"curve": [ 0.235, 0.01, 0.795, 1 ]
+					},
+					{
+						"time": 0.8666,
+						"angle": -7.06,
+						"curve": [ 0.209, 0, 0.816, 0.98 ]
+					},
+					{ "time": 1, "angle": -10.28 }
+				],
+				"translate": [
+					{ "time": 0, "x": -1.29, "y": 1.68 }
+				]
+			},
+			"right foot": {
+				"rotate": [
+					{ "time": 0, "angle": -5.25 },
+					{ "time": 0.2333, "angle": -1.91 },
+					{ "time": 0.3666, "angle": -6.45 },
+					{ "time": 0.5, "angle": -5.39 },
+					{ "time": 0.7333, "angle": -11.68 },
+					{ "time": 0.8666, "angle": 0.46 },
+					{ "time": 1, "angle": -5.25 }
+				]
+			},
+			"right lower leg": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": -3.39,
+						"curve": [ 0.316, 0.01, 0.741, 0.98 ]
+					},
+					{
+						"time": 0.1333,
+						"angle": -45.53,
+						"curve": [ 0.229, 0, 0.738, 0.97 ]
+					},
+					{ "time": 0.2333, "angle": -4.83 },
+					{ "time": 0.5, "angle": -19.53 },
+					{ "time": 0.6333, "angle": -64.8 },
+					{
+						"time": 0.7333,
+						"angle": -82.56,
+						"curve": [ 0.557, 0.18, 1, 1 ]
+					},
+					{ "time": 1, "angle": -3.39 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": 0, "curve": "stepped" },
+					{ "time": 0.5, "x": 0, "y": 0 },
+					{ "time": 0.6333, "x": 2.18, "y": 0.21 },
+					{ "time": 1, "x": 0, "y": 0 }
+				]
+			},
+			"hip": {
+				"rotate": [
+					{ "time": 0, "angle": 0, "curve": "stepped" },
+					{ "time": 1, "angle": 0 }
+				],
+				"translate": [
+					{ "time": 0, "x": 0, "y": -4.16 },
+					{
+						"time": 0.1333,
+						"x": 0,
+						"y": -7.05,
+						"curve": [ 0.359, 0.47, 0.646, 0.74 ]
+					},
+					{ "time": 0.3666, "x": 0, "y": 6.78 },
+					{ "time": 0.5, "x": 0, "y": -6.13 },
+					{
+						"time": 0.6333,
+						"x": 0,
+						"y": -7.05,
+						"curve": [ 0.359, 0.47, 0.646, 0.74 ]
+					},
+					{ "time": 0.8666, "x": 0, "y": 6.78 },
+					{ "time": 1, "x": 0, "y": -4.16 }
+				]
+			},
+			"neck": {
+				"rotate": [
+					{ "time": 0, "angle": 3.6 },
+					{ "time": 0.1333, "angle": 17.49 },
+					{ "time": 0.2333, "angle": 6.1 },
+					{ "time": 0.3666, "angle": 3.45 },
+					{ "time": 0.5, "angle": 5.17 },
+					{ "time": 0.6333, "angle": 18.36 },
+					{ "time": 0.7333, "angle": 6.09 },
+					{ "time": 0.8666, "angle": 2.28 },
+					{ "time": 1, "angle": 3.6 }
+				]
+			},
+			"head": {
+				"rotate": [
+					{
+						"time": 0,
+						"angle": 3.6,
+						"curve": [ 0, 0, 0.704, 1.17 ]
+					},
+					{ "time": 0.1333, "angle": -0.2 },
+					{ "time": 0.2333, "angle": 6.1 },
+					{ "time": 0.3666, "angle": 3.45 },
+					{
+						"time": 0.5,
+						"angle": 5.17,
+						"curve": [ 0, 0, 0.704, 1.61 ]
+					},
+					{ "time": 0.6666, "angle": 1.1 },
+					{ "time": 0.7333, "angle": 6.09 },
+					{ "time": 0.8666, "angle": 2.28 },
+					{ "time": 1, "angle": 3.6 }
+				]
+			}
+		},
+		"slots": {
+			"eyes": {
+				"attachment": [
+					{ "time": 0.7, "name": "eyes closed" },
+					{ "time": 0.8, "name": null }
+				]
+			}
+		}
+	}
+}
+}

spine-threejs/example/data/hero.atlas

@@ -0,0 +1,139 @@
+
+hero.png
+size: 512,256
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+body
+  rotate: false
+  xy: 176, 81
+  size: 97, 95
+  orig: 97, 95
+  offset: 0, 0
+  index: -1
+eyes
+  rotate: false
+  xy: 181, 48
+  size: 82, 31
+  orig: 82, 31
+  offset: 0, 0
+  index: -1
+fingers
+  rotate: false
+  xy: 458, 155
+  size: 31, 33
+  orig: 31, 33
+  offset: 0, 0
+  index: -1
+foot1
+  rotate: false
+  xy: 236, 4
+  size: 50, 42
+  orig: 50, 42
+  offset: 0, 0
+  index: -1
+foot2
+  rotate: false
+  xy: 181, 8
+  size: 53, 38
+  orig: 53, 38
+  offset: 0, 0
+  index: -1
+forearm1
+  rotate: false
+  xy: 288, 5
+  size: 41, 49
+  orig: 41, 49
+  offset: 0, 0
+  index: -1
+forearm2
+  rotate: false
+  xy: 425, 111
+  size: 31, 32
+  orig: 31, 32
+  offset: 0, 0
+  index: -1
+hand1
+  rotate: false
+  xy: 386, 128
+  size: 37, 48
+  orig: 37, 48
+  offset: 0, 0
+  index: -1
+hand2
+  rotate: false
+  xy: 425, 145
+  size: 31, 37
+  orig: 31, 37
+  offset: 0, 0
+  index: -1
+head
+  rotate: false
+  xy: 2, 74
+  size: 172, 173
+  orig: 172, 173
+  offset: 0, 0
+  index: -1
+mantles
+  rotate: false
+  xy: 2, 17
+  size: 136, 55
+  orig: 136, 55
+  offset: 0, 0
+  index: -1
+mouth
+  rotate: false
+  xy: 2, 2
+  size: 61, 13
+  orig: 61, 13
+  offset: 0, 0
+  index: -1
+shin1
+  rotate: false
+  xy: 456, 190
+  size: 53, 57
+  orig: 53, 57
+  offset: 0, 0
+  index: -1
+shin2
+  rotate: false
+  xy: 275, 56
+  size: 51, 54
+  orig: 51, 54
+  offset: 0, 0
+  index: -1
+sword
+  rotate: false
+  xy: 176, 178
+  size: 216, 69
+  orig: 216, 69
+  offset: 0, 0
+  index: -1
+thigh1
+  rotate: false
+  xy: 394, 184
+  size: 60, 63
+  orig: 60, 63
+  offset: 0, 0
+  index: -1
+thigh2
+  rotate: false
+  xy: 275, 112
+  size: 57, 64
+  orig: 57, 64
+  offset: 0, 0
+  index: -1
+upperarm1
+  rotate: false
+  xy: 334, 120
+  size: 50, 56
+  orig: 50, 56
+  offset: 0, 0
+  index: -1
+upperarm2
+  rotate: false
+  xy: 140, 13
+  size: 39, 59
+  orig: 39, 59
+  offset: 0, 0
+  index: -1

spine-threejs/example/data/skeleton.atlas

@@ -0,0 +1,223 @@
+
+skeleton.png
+size: 512,128
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+hair
+  rotate: false
+  xy: 2, 48
+  size: 44, 69
+  orig: 44, 69
+  offset: 0, 0
+  index: -1
+hat
+  rotate: false
+  xy: 192, 89
+  size: 54, 28
+  orig: 54, 28
+  offset: 0, 0
+  index: -1
+head
+  rotate: false
+  xy: 142, 67
+  size: 48, 50
+  orig: 48, 50
+  offset: 0, 0
+  index: -1
+left-arm-bottom
+  rotate: false
+  xy: 41, 8
+  size: 17, 32
+  orig: 17, 32
+  offset: 0, 0
+  index: -1
+left-arm-top
+  rotate: false
+  xy: 23, 7
+  size: 16, 39
+  orig: 16, 39
+  offset: 0, 0
+  index: -1
+left-foot
+  rotate: false
+  xy: 198, 2
+  size: 30, 20
+  orig: 30, 20
+  offset: 0, 0
+  index: -1
+left-foot-boots
+  rotate: false
+  xy: 248, 95
+  size: 30, 22
+  orig: 30, 22
+  offset: 0, 0
+  index: -1
+left-hand
+  rotate: false
+  xy: 230, 5
+  size: 14, 17
+  orig: 14, 17
+  offset: 0, 0
+  index: -1
+left-leg-bottom
+  rotate: false
+  xy: 276, 35
+  size: 17, 58
+  orig: 17, 58
+  offset: 0, 0
+  index: -1
+left-leg-top
+  rotate: false
+  xy: 142, 2
+  size: 26, 63
+  orig: 26, 63
+  offset: 0, 0
+  index: -1
+left-lower-arm-shirt
+  rotate: false
+  xy: 60, 10
+  size: 18, 30
+  orig: 18, 30
+  offset: 0, 0
+  index: -1
+left-lower-leg-boots
+  rotate: false
+  xy: 80, 10
+  size: 13, 22
+  orig: 13, 22
+  offset: 0, 0
+  index: -1
+left-lower-leg-pants
+  rotate: false
+  xy: 254, 32
+  size: 20, 61
+  orig: 20, 61
+  offset: 0, 0
+  index: -1
+right-lower-leg-pants
+  rotate: false
+  xy: 254, 32
+  size: 20, 61
+  orig: 20, 61
+  offset: 0, 0
+  index: -1
+left-upper-arm-shirt
+  rotate: false
+  xy: 2, 6
+  size: 19, 40
+  orig: 19, 40
+  offset: 0, 0
+  index: -1
+right-upper-arm-shirt
+  rotate: false
+  xy: 2, 6
+  size: 19, 40
+  orig: 19, 40
+  offset: 0, 0
+  index: -1
+left-upper-leg-pants
+  rotate: false
+  xy: 170, 2
+  size: 26, 63
+  orig: 26, 63
+  offset: 0, 0
+  index: -1
+right-arm-middle
+  rotate: false
+  xy: 392, 85
+  size: 17, 32
+  orig: 17, 32
+  offset: 0, 0
+  index: -1
+right-arm-top
+  rotate: false
+  xy: 314, 56
+  size: 16, 39
+  orig: 16, 39
+  offset: 0, 0
+  index: -1
+right-foot
+  rotate: false
+  xy: 312, 97
+  size: 30, 20
+  orig: 30, 20
+  offset: 0, 0
+  index: -1
+right-foot-boots
+  rotate: false
+  xy: 280, 95
+  size: 30, 22
+  orig: 30, 22
+  offset: 0, 0
+  index: -1
+right-hand
+  rotate: false
+  xy: 314, 37
+  size: 14, 17
+  orig: 14, 17
+  offset: 0, 0
+  index: -1
+right-leg-bottom
+  rotate: false
+  xy: 295, 35
+  size: 17, 58
+  orig: 17, 58
+  offset: 0, 0
+  index: -1
+right-leg-top
+  rotate: false
+  xy: 198, 24
+  size: 26, 63
+  orig: 26, 63
+  offset: 0, 0
+  index: -1
+right-lower-arm-shirt
+  rotate: false
+  xy: 372, 87
+  size: 18, 30
+  orig: 18, 30
+  offset: 0, 0
+  index: -1
+right-lower-leg-boots
+  rotate: false
+  xy: 411, 95
+  size: 13, 22
+  orig: 13, 22
+  offset: 0, 0
+  index: -1
+right-upper-leg-pants
+  rotate: false
+  xy: 226, 24
+  size: 26, 63
+  orig: 26, 63
+  offset: 0, 0
+  index: -1
+shirt
+  rotate: false
+  xy: 48, 42
+  size: 30, 75
+  orig: 30, 75
+  offset: 0, 0
+  index: -1
+torso
+  rotate: false
+  xy: 112, 34
+  size: 28, 83
+  orig: 28, 83
+  offset: 0, 0
+  index: -1
+torso-clothed
+  rotate: false
+  xy: 80, 34
+  size: 30, 83
+  orig: 30, 83
+  offset: 0, 0
+  index: -1
+torso-pants
+  rotate: false
+  xy: 344, 93
+  size: 26, 24
+  orig: 26, 24
+  offset: 0, 0
+  index: -1

spine-threejs/example/data/spineboy.atlas

@@ -0,0 +1,195 @@
+
+spineboy.png
+size: 1024,256
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+eye_indifferent
+  rotate: false
+  xy: 890, 146
+  size: 56, 53
+  orig: 56, 53
+  offset: 0, 0
+  index: -1
+eye_surprised
+  rotate: false
+  xy: 444, 5
+  size: 56, 53
+  orig: 56, 53
+  offset: 0, 0
+  index: -1
+front_bracer
+  rotate: false
+  xy: 966, 103
+  size: 35, 48
+  orig: 35, 48
+  offset: 0, 0
+  index: -1
+front_fist_closed
+  rotate: false
+  xy: 847, 84
+  size: 45, 49
+  orig: 45, 49
+  offset: 0, 0
+  index: -1
+front_fist_open
+  rotate: false
+  xy: 968, 190
+  size: 52, 52
+  orig: 52, 52
+  offset: 0, 0
+  index: -1
+front_foot
+  rotate: false
+  xy: 890, 201
+  size: 76, 41
+  orig: 76, 41
+  offset: 0, 0
+  index: -1
+front_foot_bend1
+  rotate: false
+  xy: 444, 98
+  size: 77, 42
+  orig: 77, 42
+  offset: 0, 0
+  index: -1
+front_foot_bend2
+  rotate: false
+  xy: 279, 5
+  size: 65, 56
+  orig: 65, 56
+  offset: 0, 0
+  index: -1
+front_shin
+  rotate: false
+  xy: 792, 132
+  size: 49, 110
+  orig: 49, 110
+  offset: 0, 0
+  index: -1
+front_thigh
+  rotate: false
+  xy: 935, 77
+  size: 29, 67
+  orig: 29, 67
+  offset: 0, 0
+  index: -1
+front_upper_arm
+  rotate: false
+  xy: 410, 3
+  size: 32, 58
+  orig: 32, 58
+  offset: 0, 0
+  index: -1
+goggles
+  rotate: false
+  xy: 444, 142
+  size: 157, 100
+  orig: 157, 100
+  offset: 0, 0
+  index: -1
+gun
+  rotate: false
+  xy: 603, 120
+  size: 126, 122
+  orig: 126, 122
+  offset: 0, 0
+  index: -1
+head
+  rotate: false
+  xy: 279, 63
+  size: 163, 179
+  orig: 163, 179
+  offset: 0, 0
+  index: -1
+mouth_grind
+  rotate: false
+  xy: 948, 153
+  size: 56, 35
+  orig: 56, 35
+  offset: 0, 0
+  index: -1
+mouth_oooo
+  rotate: false
+  xy: 731, 97
+  size: 56, 35
+  orig: 56, 35
+  offset: 0, 0
+  index: -1
+mouth_smile
+  rotate: false
+  xy: 789, 95
+  size: 56, 35
+  orig: 56, 35
+  offset: 0, 0
+  index: -1
+muzzle
+  rotate: false
+  xy: 2, 2
+  size: 275, 240
+  orig: 277, 240
+  offset: 0, 0
+  index: -1
+neck
+  rotate: false
+  xy: 595, 93
+  size: 22, 25
+  orig: 22, 25
+  offset: 0, 0
+  index: -1
+rear_bracer
+  rotate: false
+  xy: 966, 58
+  size: 34, 43
+  orig: 34, 43
+  offset: 0, 0
+  index: -1
+rear_foot
+  rotate: false
+  xy: 444, 60
+  size: 68, 36
+  orig: 68, 36
+  offset: 0, 0
+  index: -1
+rear_foot_bend1
+  rotate: false
+  xy: 523, 100
+  size: 70, 40
+  orig: 70, 40
+  offset: 0, 0
+  index: -1
+rear_foot_bend2
+  rotate: false
+  xy: 346, 11
+  size: 62, 50
+  orig: 62, 50
+  offset: 0, 0
+  index: -1
+rear_shin
+  rotate: false
+  xy: 843, 135
+  size: 45, 107
+  orig: 45, 107
+  offset: 0, 0
+  index: -1
+rear_thigh
+  rotate: false
+  xy: 894, 82
+  size: 39, 62
+  orig: 39, 62
+  offset: 0, 0
+  index: -1
+rear_upper_arm
+  rotate: false
+  xy: 502, 6
+  size: 28, 52
+  orig: 28, 52
+  offset: 0, 0
+  index: -1
+torso
+  rotate: false
+  xy: 731, 134
+  size: 59, 108
+  orig: 59, 108
+  offset: 0, 0
+  index: -1

spine-threejs/example/index.html

@@ -0,0 +1,413 @@
+<!-----------------------------------------------------------------------------
+-- Spine Runtimes Software License
+-- Version 2.1
+-- 
+-- Copyright (c) 2013, Esoteric Software
+-- All rights reserved.
+-- 
+-- You are granted a perpetual, non-exclusive, non-sublicensable and
+-- non-transferable license to install, execute and perform the Spine Runtimes
+-- Software (the "Software") solely for internal use. Without the written
+-- permission of Esoteric Software (typically granted by licensing Spine), you
+-- may not (a) modify, translate, adapt or otherwise create derivative works,
+-- improvements of the Software or develop new applications using the Software
+-- or (b) remove, delete, alter or obscure any trademarks or any copyright,
+-- trademark, patent or other intellectual property or proprietary rights
+-- notices on or in the Software, including any copy thereof. Redistributions
+-- in binary or source form must include this license and terms.
+-- 
+-- THIS SOFTWARE IS PROVIDED BY ESOTERIC SOFTWARE "AS IS" AND ANY EXPRESS OR
+-- IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+-- MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO
+-- EVENT SHALL ESOTERIC SOFTARE BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+-- SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+-- PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
+-- OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
+-- WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
+-- OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
+-- ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+------------------------------------------------------------------------------>
+
+<html>
+<head>
+<meta charset="UTF-8">
+<title>spine-js</title>
+<script src="../spine-js/spine.js"></script>
+<script src="../three.min.js"></script>
+
+<style>body, input { font-family: tahoma; font-size: 11pt }</style>
+</head>
+<body>
+
+<input type="button" value="Spineboy" onclick="load('spineboy', 0.6)">
+<input type="button" value="Hero" onclick="load('hero', 1)">
+<input type="button" value="Goblins" onclick="load('goblins', 1)">
+<input type="button" value="Gipsy" onclick="load('skeleton', 1)">
+ &nbsp; &nbsp; Click to change the animation or skin.
+
+<br>
+<script>
+
+(function () {
+
+	var loadText = function (url, callback) {
+		var req = new XMLHttpRequest ();
+		req.open ("GET", url, true);
+		req.responseType = 'text';
+		req.addEventListener ('error', function (event) {}, false);
+		req.addEventListener ('abort', function (event) {}, false);
+		req.addEventListener ('load', function (event) { callback (req.response); }, false);
+		req.send ();
+		return req;
+	};
+
+	var loadImage = function (url, callback) {
+		var image = new Image ();
+		image.addEventListener ('error', function (event) {}, false);
+		image.addEventListener ('abort', function (event) {}, false);
+		image.addEventListener ('load', function (event) { callback (image); }, false);
+		image.src = url;
+		return image;
+	};
+
+	SpineAnimation = function (animation, path, scale) {
+
+		THREE.Object3D.call (this);
+
+		this.name = animation;
+
+		path = path ? (path +
+			((path.substr(-1) != '/') ? '/' : '')
+		) : '';
+
+		var self = this;
+
+		loadText (path + animation + '.atlas', function (atlasText) {
+			self.atlas = new spine.Atlas(atlasText, {
+				load: function (page, image, atlas) {
+					loadImage (path + image, function (image) {
+						// calculate UVs in atlas regions
+						page.width = image.width;
+						page.height = image.height;
+
+						atlas.updateUVs (page);
+
+						// propagate new UVs to attachments, if they were already created
+						if (self.skeleton) {
+							var skins = self.skeleton.data.skins;
+							for (var s = 0, n = skins.length; s < n; s++) {
+								var attachments = skins[s].attachments;
+								for (var k in attachments) {
+									var attachment = attachments[k];
+									if (attachment instanceof spine.RegionAttachment) {
+										var region = attachment.rendererObject;
+										attachment.setUVs (region.u, region.v, region.u2, region.v2, region.rotate);
+									}
+								}
+							}
+						}
+
+						// create basic material for the page
+						var texture = new THREE.Texture (image);
+						texture.needsUpdate = true;
+
+						page.rendererObject = [
+							new THREE.MeshBasicMaterial ({
+								//color: 0xff00, wireframe: true,
+								map : texture, side : THREE.DoubleSide, transparent : true, alphaTest : 0.5
+							})
+						];
+					});
+				},
+				unload: function (materials) {
+					for (var i = 0, n = materials.length; i < n; i++) {
+						var material = materials[i];
+						if (material.meshes) {
+							for (var name in material.meshes) {
+								var mesh = material.meshes[name];
+								if (mesh.parent) {
+									mesh.parent.remove (mesh);
+								}
+								mesh.geometry.dispose();
+							}
+						}
+						material.map.dispose();
+						material.dispose();
+					}
+					// will be called multiple times
+					materials.length = 0;
+				}
+			});
+
+			loadText (path + animation + '.json', function (skeletonText) {
+				var json = new spine.SkeletonJson (new spine.AtlasAttachmentLoader (self.atlas));
+				json.scale = scale || 1;
+
+				var skeletonData = json.readSkeletonData (JSON.parse (skeletonText));
+
+				self.skeleton = new spine.Skeleton (skeletonData);
+				self.stateData = new spine.AnimationStateData (skeletonData);	
+				self.state = new spine.AnimationState (self.stateData);
+
+				self.dispatchEvent({
+					type : SpineAnimation.SKELETON_DATA_LOADED
+				});
+			});
+		});
+
+		var matrix = new THREE.Matrix4 ();
+
+		// if given, dt must be in ms
+
+		this.update = function (dt, dz) {
+			if (!this.state) return;
+
+			this.state.update (dt || (1.0 / 60));
+			this.state.apply (this.skeleton);
+			this.skeleton.updateWorldTransform ();
+
+			this.traverse (function (object) {
+				if (object instanceof THREE.Mesh) {
+					object.visible = false;
+				}
+			});
+
+			var Z = 0;
+			var drawOrder = this.skeleton.drawOrder;
+			for (var i = 0, n = drawOrder.length; i < n; i++) {
+				var slot = drawOrder[i];
+				var attachment = slot.attachment;
+				if (!(attachment instanceof spine.RegionAttachment)) continue;
+
+				var materials = attachment.rendererObject.page.rendererObject;
+				if (!materials) {
+					// texture was not loaded yet
+					continue;
+				}
+
+				if (slot.data.additiveBlending && (materials.length == 1)) {
+					// create separate material for additive blending
+					materials.push (new THREE.MeshBasicMaterial ({
+						map : materials[0].map,
+						side : THREE.DoubleSide,
+						transparent : true,
+						blending : THREE.AdditiveBlending,
+						depthWrite : false
+					}));
+				}
+
+				var material = materials[ slot.data.additiveBlending ? 1 : 0 ];
+
+				material.meshes = material.meshes || {};
+
+				var mesh = material.meshes[slot.data.name];
+
+				var geometry;
+
+				if (mesh) {
+					geometry = mesh.geometry;
+
+					mesh.visible = true;
+				} else {
+					geometry = new THREE.PlaneGeometry (
+						attachment.regionOriginalWidth,
+						attachment.regionOriginalHeight
+					);
+
+					geometry.dynamic = true;
+
+					mesh = new THREE.Mesh (geometry, material);
+
+					material.meshes[slot.data.name] = mesh;
+
+					mesh.matrixAutoUpdate = false;
+
+					this.add (mesh);
+				}
+
+				if (mesh.attachmentTime && (slot.getAttachmentTime () > mesh.attachmentTime)) {
+					// do nothing
+				} else {
+					// update UVs
+					geometry.faceVertexUvs[0][0][0].set (attachment.uvs[6], 1- attachment.uvs[7]);
+					geometry.faceVertexUvs[0][0][1].set (attachment.uvs[4], 1- attachment.uvs[5]);
+					geometry.faceVertexUvs[0][0][2].set (attachment.uvs[0], 1- attachment.uvs[1]);
+					geometry.faceVertexUvs[0][1][0].set (attachment.uvs[4], 1- attachment.uvs[5]);
+					geometry.faceVertexUvs[0][1][1].set (attachment.uvs[2], 1- attachment.uvs[3]);
+					geometry.faceVertexUvs[0][1][2].set (attachment.uvs[0], 1- attachment.uvs[1]);
+					geometry.uvsNeedUpdate = true;
+
+					geometry.vertices[1].set (attachment.offset[0], attachment.offset[1], 0);
+					geometry.vertices[3].set (attachment.offset[2], attachment.offset[3], 0);
+					geometry.vertices[2].set (attachment.offset[4], attachment.offset[5], 0);
+					geometry.vertices[0].set (attachment.offset[6], attachment.offset[7], 0);
+					geometry.verticesNeedUpdate = true;
+
+					mesh.attachmentTime = slot.getAttachmentTime ();
+				}
+
+				matrix.makeTranslation (
+					this.skeleton.x + slot.bone.worldX,
+					this.skeleton.y + slot.bone.worldY,
+					(dz || 0.1) * Z++
+				);
+
+				matrix.elements[0] = slot.bone.m00; matrix.elements[4] = slot.bone.m01;
+				matrix.elements[1] = slot.bone.m10; matrix.elements[5] = slot.bone.m11;
+
+				mesh.matrix.copy (matrix);
+
+				/* TODO slot.r,g,b,a ?? turbulenz example code:
+				batch.add(
+					attachment.rendererObject.page.rendererObject,
+					vertices[0], vertices[1],
+					vertices[6], vertices[7],
+					vertices[2], vertices[3],
+					vertices[4], vertices[5],
+					skeleton.r * slot.r,
+					skeleton.g * slot.g,
+					skeleton.b * slot.b,
+					skeleton.a * slot.a,
+					attachment.uvs[0], attachment.uvs[1],
+					attachment.uvs[4], attachment.uvs[5]
+				);
+				*/
+			}
+
+		};
+	};
+
+	SpineAnimation.SKELETON_DATA_LOADED = 'skeletonDataLoaded';
+
+	SpineAnimation.prototype = Object.create (THREE.Object3D.prototype);
+
+	SpineAnimation.prototype.dispose = function () {
+		if (this.parent) this.parent.remove (this); this.atlas.dispose ();
+	};
+
+}) ();
+
+
+
+
+
+
+    var scene, camera, renderer;
+    var geometry, material, mesh;
+
+    var test;
+
+    function load(animation, scale) {
+    	if (test) {
+    		test.dispose ();
+    	}
+
+    	test = new SpineAnimation (animation, 'data/', scale);
+
+        test.addEventListener( SpineAnimation.SKELETON_DATA_LOADED, function () {
+        	var canvas = renderer.domElement;
+
+        	switch (test.name) {
+        		case 'spineboy':
+					test.stateData.setMixByName('walk', 'jump', 0.2);
+					test.stateData.setMixByName('run', 'jump', 0.2);
+					test.stateData.setMixByName('jump', 'run', 0.2);
+					test.state.setAnimationByName(0, 'walk', true);
+					canvas.onmousedown = function () {
+						test.state.setAnimationByName(0, 'jump', false);
+						test.state.addAnimationByName(0, 'run', true, 0);
+					}
+					break;
+				case 'hero':
+					test.stateData.defaultMix = 0.2;
+					test.stateData.setMixByName('Walk', 'Attack', 0);
+					test.stateData.setMixByName('Attack', 'Run', 0);
+					test.stateData.setMixByName('Run', 'Attack', 0);
+					test.state.setAnimationByName(0, 'Idle', true);
+					canvas.onmousedown = function () {
+						var name = test.state.getCurrent(0).animation.name;
+						if (name == 'Idle') {
+							test.state.setAnimationByName(0, 'Crouch', true);
+						} else if (name == 'Crouch') {
+							test.state.setAnimationByName(0, 'Walk', true);
+						} else {
+							test.state.setAnimationByName(0, 'Attack', false);
+							test.state.addAnimationByName(0, 'Run', true, 0);
+						}
+					}
+					break;
+				case 'goblins':
+					test.skeleton.setSkinByName('goblingirl'); // TODO find why spine.Skeleton.prototype.setSkin does not work
+					test.skeleton.setSlotsToSetupPose();
+					test.state.setAnimationByName(0, 'walk', true);
+					canvas.onmousedown = function () {
+						test.skeleton.setSkinByName(test.skeleton.skin.name == 'goblin' ? 'goblingirl' : 'goblin');
+						test.skeleton.setSlotsToSetupPose();
+					}
+					break;
+				case 'skeleton':
+					test.state.setAnimationByName(0, 'walk test', true);
+					canvas.onmousedown = function () {
+						var name = test.state.getCurrent(0).animation.name;
+						if (name == 'walk test') {
+							test.state.setAnimationByName(0, 'idle test', true);
+						} else {
+							test.state.setAnimationByName(0, 'walk test', true);
+						}
+					}
+					break;
+        	}
+        	//test.skeleton.y = -200;
+        });
+
+        mesh.add( test );
+    }
+
+    init();
+    animate();
+
+    function init() {
+		spine.Bone.yDown = false;
+
+        scene = new THREE.Scene();
+
+        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
+        camera.position.z = 400;
+
+        geometry = new THREE.BoxGeometry( 200, 200, 200 );
+        material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
+
+        mesh = new THREE.Mesh( geometry, material );
+        scene.add( mesh );
+
+        load( 'spineboy', 0.4 );
+
+        renderer = new THREE.WebGLRenderer();
+        renderer.setSize( window.innerWidth, window.innerHeight );
+
+        document.body.appendChild( renderer.domElement );
+
+    }
+
+    function animate() {
+
+        requestAnimationFrame( animate );
+
+        var t = Date.now ();
+        var a = Math.sin (t * 6e-4);
+        var b = Math.cos (t * 3e-4);
+
+        mesh.rotation.x = a * Math.PI * 0.2;
+        mesh.rotation.y = b * Math.PI * 0.4;
+
+
+        test.update();
+
+        renderer.render( scene, camera );
+
+    }
+
+</script>
+
+</body>
+</html>

spine-threejs/spine-js/spine.js

@@ -0,0 +1 @@
+../../spine-js/spine.js