From 187b2d88f19bad30d98e4294615b14dcc7f45cc1 Mon Sep 17 00:00:00 2001
From: Mario Zechner <badlogicgames@gmail.com>
Date: Thu, 26 Aug 2021 14:28:14 +0200
Subject: [PATCH] [ts] Minor touch up of threejs example.

---
 spine-ts/spine-threejs/example/index.html | 190 +++++++++++-----------
 1 file changed, 95 insertions(+), 95 deletions(-)
diff --git a/spine-ts/spine-threejs/example/index.html b/spine-ts/spine-threejs/example/index.html
index 53c7f1ed1..85842eb8c 100644
--- a/spine-ts/spine-threejs/example/index.html
+++ b/spine-ts/spine-threejs/example/index.html
@@ -5,6 +5,7 @@
 	<title>spine-threejs</title>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.js"></script>
 	<script src="../../build/spine-threejs.js"></script>
+	<script src="index.js"></script>
 </head>
 <style>
 	* {
@@ -26,109 +27,108 @@
 
 <body>
 	<script>
+		(function () {
+			var scene, camera, renderer;
+			var geometry, material, mesh, skeletonMesh;
+			var assetManager;
+			var canvas;
+			var lastFrameTime = Date.now() / 1000;
 
-		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";
 
-		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;
 
-		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);
 
-			// 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.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.
-				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.require(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;
+				requestAnimationFrame(load);
 			}
 
-			camera.aspect = w / h;
-			camera.updateProjectionMatrix();
+			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);
 
-			renderer.setSize(w, h);
-		}
+					// 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.
+					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.require(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>
