feat: use custom player module

2025-03-23 16:38:13 +08:00
parent c6e2dd936c
commit f749de13c2
455 changed files with 1256 additions and 12936 deletions
--- a/apps/module/spine-ts/threejs/example/index.html
+++ b/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>