feat: use custom player module

apps/module/spine-ts/threejs/example/assets/raptor.atlas

@@ -0,0 +1,272 @@
+
+raptor.png
+size: 1024,512
+format: RGBA8888
+filter: Linear,Linear
+repeat: none
+back-arm
+  rotate: true
+  xy: 829, 88
+  size: 46, 25
+  orig: 46, 25
+  offset: 0, 0
+  index: -1
+back-bracer
+  rotate: true
+  xy: 195, 238
+  size: 39, 28
+  orig: 39, 28
+  offset: 0, 0
+  index: -1
+back-hand
+  rotate: true
+  xy: 724, 140
+  size: 36, 34
+  orig: 36, 34
+  offset: 0, 0
+  index: -1
+back-knee
+  rotate: true
+  xy: 760, 131
+  size: 49, 67
+  orig: 49, 67
+  offset: 0, 0
+  index: -1
+back-thigh
+  rotate: true
+  xy: 225, 238
+  size: 39, 24
+  orig: 39, 24
+  offset: 0, 0
+  index: -1
+eyes-open
+  rotate: false
+  xy: 975, 204
+  size: 47, 45
+  orig: 47, 45
+  offset: 0, 0
+  index: -1
+front-arm
+  rotate: false
+  xy: 969, 112
+  size: 48, 26
+  orig: 48, 26
+  offset: 0, 0
+  index: -1
+front-bracer
+  rotate: true
+  xy: 724, 97
+  size: 41, 29
+  orig: 41, 29
+  offset: 0, 0
+  index: -1
+front-hand
+  rotate: false
+  xy: 251, 239
+  size: 41, 38
+  orig: 41, 38
+  offset: 0, 0
+  index: -1
+front-open-hand
+  rotate: true
+  xy: 856, 76
+  size: 43, 44
+  orig: 43, 44
+  offset: 0, 0
+  index: -1
+front-thigh
+  rotate: true
+  xy: 729, 178
+  size: 57, 29
+  orig: 57, 29
+  offset: 0, 0
+  index: -1
+gun
+  rotate: false
+  xy: 894, 251
+  size: 107, 103
+  orig: 107, 103
+  offset: 0, 0
+  index: -1
+gun-nohand
+  rotate: false
+  xy: 764, 241
+  size: 105, 102
+  orig: 105, 102
+  offset: 0, 0
+  index: -1
+head
+  rotate: false
+  xy: 756, 345
+  size: 136, 149
+  orig: 136, 149
+  offset: 0, 0
+  index: -1
+lower-leg
+  rotate: true
+  xy: 475, 237
+  size: 73, 98
+  orig: 73, 98
+  offset: 0, 0
+  index: -1
+mouth-grind
+  rotate: false
+  xy: 975, 172
+  size: 47, 30
+  orig: 47, 30
+  offset: 0, 0
+  index: -1
+mouth-smile
+  rotate: false
+  xy: 975, 140
+  size: 47, 30
+  orig: 47, 30
+  offset: 0, 0
+  index: -1
+neck
+  rotate: false
+  xy: 366, 282
+  size: 18, 21
+  orig: 18, 21
+  offset: 0, 0
+  index: -1
+raptor-back-arm
+  rotate: true
+  xy: 636, 97
+  size: 82, 86
+  orig: 82, 86
+  offset: 0, 0
+  index: -1
+raptor-body
+  rotate: false
+  xy: 2, 2
+  size: 632, 233
+  orig: 632, 233
+  offset: 0, 0
+  index: -1
+raptor-front-arm
+  rotate: true
+  xy: 871, 168
+  size: 81, 102
+  orig: 81, 102
+  offset: 0, 0
+  index: -1
+raptor-front-leg
+  rotate: false
+  xy: 2, 237
+  size: 191, 257
+  orig: 191, 257
+  offset: 0, 0
+  index: -1
+raptor-hindleg-back
+  rotate: false
+  xy: 195, 279
+  size: 169, 215
+  orig: 169, 215
+  offset: 0, 0
+  index: -1
+raptor-horn
+  rotate: true
+  xy: 431, 312
+  size: 182, 80
+  orig: 182, 80
+  offset: 0, 0
+  index: -1
+raptor-horn-back
+  rotate: true
+  xy: 513, 318
+  size: 176, 77
+  orig: 176, 77
+  offset: 0, 0
+  index: -1
+raptor-jaw
+  rotate: false
+  xy: 894, 356
+  size: 126, 138
+  orig: 126, 138
+  offset: 0, 0
+  index: -1
+raptor-jaw-tooth
+  rotate: true
+  xy: 294, 240
+  size: 37, 48
+  orig: 37, 48
+  offset: 0, 0
+  index: -1
+raptor-mouth-inside
+  rotate: true
+  xy: 344, 241
+  size: 36, 41
+  orig: 36, 41
+  offset: 0, 0
+  index: -1
+raptor-saddle-strap-back
+  rotate: false
+  xy: 575, 242
+  size: 54, 74
+  orig: 54, 74
+  offset: 0, 0
+  index: -1
+raptor-saddle-strap-front
+  rotate: true
+  xy: 764, 182
+  size: 57, 95
+  orig: 57, 95
+  offset: 0, 0
+  index: -1
+raptor-saddle-w-shadow
+  rotate: false
+  xy: 592, 323
+  size: 162, 171
+  orig: 162, 171
+  offset: 0, 0
+  index: -1
+raptor-tail-shadow
+  rotate: true
+  xy: 366, 305
+  size: 189, 63
+  orig: 189, 63
+  offset: 0, 0
+  index: -1
+raptor-tongue
+  rotate: false
+  xy: 387, 239
+  size: 86, 64
+  orig: 86, 64
+  offset: 0, 0
+  index: -1
+stirrup-back
+  rotate: true
+  xy: 829, 136
+  size: 44, 35
+  orig: 44, 35
+  offset: 0, 0
+  index: -1
+stirrup-front
+  rotate: true
+  xy: 866, 121
+  size: 45, 50
+  orig: 45, 50
+  offset: 0, 0
+  index: -1
+stirrup-strap
+  rotate: false
+  xy: 918, 120
+  size: 49, 46
+  orig: 49, 46
+  offset: 0, 0
+  index: -1
+torso
+  rotate: true
+  xy: 636, 181
+  size: 54, 91
+  orig: 54, 91
+  offset: 0, 0
+  index: -1
+visor
+  rotate: false
+  xy: 631, 237
+  size: 131, 84
+  orig: 131, 84
+  offset: 0, 0
+  index: -1

apps/module/spine-ts/threejs/example/index.html

@@ -0,0 +1,122 @@
+<html>
+<head>
+<meta charset="UTF-8">
+<title>spine-threejs</title>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
+<script src="../../build/spine-threejs.js"></script>
+</head>
+<style>
+	* { margin: 0; padding: 0; }
+	body, html { height: 100% }
+	canvas { position: absolute; width: 100% ;height: 100%; }
+</style>
+<body>
+<script>
+
+var scene, camera, renderer;
+var geometry, material, mesh, skeletonMesh;
+var assetManager;
+var canvas;
+var lastFrameTime = Date.now() / 1000;
+
+var baseUrl = "assets/";
+var skeletonFile = "raptor-pro.json";
+var atlasFile = skeletonFile.replace("-pro", "").replace("-ess", "").replace(".json", ".atlas");
+var animation = "walk";
+
+function init () {
+	// create the THREE.JS camera, scene and renderer (WebGL)
+	var width = window.innerWidth, height = window.innerHeight;
+	camera = new THREE.PerspectiveCamera(75, width / height, 1, 3000);
+	camera.position.y = 100;
+	camera.position.z = 400;
+	scene = new THREE.Scene();
+	renderer = new THREE.WebGLRenderer();
+	renderer.setSize(width, height);
+	document.body.appendChild(renderer.domElement);
+	canvas = renderer.domElement;
+
+	// load the assets required to display the Raptor model
+	assetManager = new spine.threejs.AssetManager(baseUrl);
+	assetManager.loadText(skeletonFile);
+	assetManager.loadTextureAtlas(atlasFile);
+
+	requestAnimationFrame(load);
+}
+
+function load (name, scale) {
+	if (assetManager.isLoadingComplete()) {
+		// Add a box to the scene to which we attach the skeleton mesh
+		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 the texture atlas using name.atlas and name.png from the AssetManager.
+		// The function passed to TextureAtlas is used to resolve relative paths.
+		atlas = assetManager.get(atlasFile);
+
+		// Create a AtlasAttachmentLoader that resolves region, mesh, boundingbox and path attachments
+		atlasLoader = new spine.AtlasAttachmentLoader(atlas);
+
+		// Create a SkeletonJson instance for parsing the .json file.
+		var skeletonJson = new spine.SkeletonJson(atlasLoader);
+
+		// Set the scale to apply during parsing, parse the file, and create a new skeleton.
+		skeletonJson.scale = 0.4;
+		var skeletonData = skeletonJson.readSkeletonData(assetManager.get(skeletonFile));
+
+		// Create a SkeletonMesh from the data and attach it to the scene
+		skeletonMesh = new spine.threejs.SkeletonMesh(skeletonData, function(parameters) {
+			parameters.depthTest = false;
+		});
+		skeletonMesh.state.setAnimation(0, animation, true);
+		mesh.add(skeletonMesh);
+
+		requestAnimationFrame(render);
+	} else requestAnimationFrame(load);
+}
+
+var lastTime = Date.now();
+function render() {
+	// calculate delta time for animation purposes
+	var now = Date.now() / 1000;
+	var delta = now - lastFrameTime;
+	lastFrameTime = now;
+
+	// resize canvas to use full page, adjust camera/renderer
+	resize();
+
+	// rotate the cube
+	mesh.rotation.x = Math.sin(now) * Math.PI * 0.2;
+	mesh.rotation.y = Math.cos(now) * Math.PI * 0.4;
+
+	// update the animation
+	skeletonMesh.update(delta);
+
+	// render the scene
+	renderer.render(scene, camera);
+
+	requestAnimationFrame(render);
+}
+
+function resize () {
+	var w = window.innerWidth;
+	var h = window.innerHeight;
+	if (canvas.width != w || canvas.height != h) {
+		canvas.width = w;
+		canvas.height = h;
+	}
+
+	camera.aspect = w / h;
+    camera.updateProjectionMatrix();
+
+    renderer.setSize(w, h);
+}
+
+(function() {
+	init();
+}());
+</script>
+</body>
+</html>