archive
/
spine-runtimes
mirror of https://github.com/EsotericSoftware/spine-runtimes.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
							<html>

<head>
	<meta charset="UTF-8">
	<title>spine-threejs</title>
	<script src="https://unpkg.com/[email protected]/build/three.js"></script>
	<script src="../dist/iife/spine-threejs.js"></script>
	<script src="./OrbitalControls.js"></script>
</head>
<style>
	* {
		margin: 0;
		padding: 0;
	}

	body,
	html {
		height: 100%
	}

	canvas {
		position: absolute;
		width: 100%;
		height: 100%;
	}
</style>

<body>
	<script>
		(function () {
			let scene, camera, renderer;
			let skeletonMesh, cube, tailBone;
			let assetManager;
			let canvas;
			let controls;
			let lastFrameTime = Date.now() / 1000;

			let baseUrl = "assets/";
			let skeletonFile = "raptor-pro.json";
			let atlasFile = skeletonFile.replace("-pro", "").replace("-ess", "").replace(".json", ".atlas");
			let animation = "walk";

			function init() {
				// create the THREE.JS camera, scene and renderer (WebGL)
				let width = window.innerWidth, height = window.innerHeight;
				camera = new THREE.PerspectiveCamera(75, width / height, 1, 3000);
				camera.position.y = 200;
				camera.position.z = 800;
				scene = new THREE.Scene();
				renderer = new THREE.WebGLRenderer();
				renderer.setSize(width, height);
				document.body.appendChild(renderer.domElement);
				canvas = renderer.domElement;
				controls = new OrbitControls(camera, renderer.domElement);

				// load the assets required to display the Raptor model
				assetManager = new spine.AssetManager(baseUrl);
				assetManager.loadText(skeletonFile);
				assetManager.loadTextureAtlas(atlasFile);

				requestAnimationFrame(load);
			}

			function load(name, scale) {
				if (assetManager.isLoadingComplete()) {
					// 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.require(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.
					let skeletonJson = new spine.SkeletonJson(atlasLoader);

					// Set the scale to apply during parsing, parse the file, and create a new skeleton.
					skeletonJson.scale = 0.4;
					let skeletonData = skeletonJson.readSkeletonData(assetManager.require(skeletonFile));

					// Create a SkeletonMesh from the data and attach it to the scene
					skeletonMesh = new spine.SkeletonMesh(skeletonData, (parameters) => {
						parameters.depthTest = true;
						parameters.depthWrite = true;
						parameters.alphaTest = 0.001;
					});
					skeletonMesh.state.setAnimation(0, animation, true);
                    skeletonMesh.position.x = 120;
                    skeletonMesh.position.y = -20;
                    skeletonMesh.position.z = 10;
					scene.add(skeletonMesh);

                    // Add a wireframe cube which will be positioned at the tail bone
                    geometry = new THREE.BoxGeometry(20, 20, 20);
                    material = new THREE.MeshBasicMaterial({ color: 0xff00, wireframe: true });
                    cube = new THREE.Mesh(geometry, material);
                    scene.add(cube);

                    // Get the tail bone
                    tailBone = skeletonMesh.skeleton.findBone("tail10");

					requestAnimationFrame(render);
				} else requestAnimationFrame(load);
			}            

			let lastTime = Date.now();
			function render() {
				// calculate delta time for animation purposes
				let now = Date.now() / 1000;
				let delta = now - lastFrameTime;
				lastFrameTime = now;

				// resize canvas to use full page, adjust camera/renderer
				resize();

				// Update orbital controls
				controls.update();

				// update the animation
				skeletonMesh.update(delta);

                // Get the tail bone coordinates in the skeleton's local coordinate space.
                let position = new THREE.Vector3(tailBone.worldX, tailBone.worldY, 0);

                // Convert the tail bone coordinates to world coordinates.
                skeletonMesh.localToWorld(position)

                // Set the tail bone coordinates as the cube's position.
                cube.position.set(position.x, position.y, position.z);

				// render the scene
				renderer.render(scene, camera);

				requestAnimationFrame(render);
			}

			function resize() {
				let w = window.innerWidth;
				let 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);
			}

			init();
		}());
	</script>
</body>

</html>