|
|
@@ -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 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.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();
|
|
|
|
|
|
- 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.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);
|
|
|
+ // 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);
|
|
|
- } 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();
|
|
|
+ function resize() {
|
|
|
+ var w = window.innerWidth;
|
|
|
+ var h = window.innerHeight;
|
|
|
+ if (canvas.width != w || canvas.height != h) {
|
|
|
+ canvas.width = w;
|
|
|
+ canvas.height = h;
|
|
|
+ }
|
|
|
|
|
|
- renderer.setSize(w, h);
|
|
|
- }
|
|
|
+ camera.aspect = w / h;
|
|
|
+ camera.updateProjectionMatrix();
|
|
|
+
|
|
|
+ renderer.setSize(w, h);
|
|
|
+ }
|
|
|
|
|
|
- (function () {
|
|
|
init();
|
|
|
}());
|
|
|
</script>
|
Mario Zechner