mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-20 08:46:43 +08:00
de6cee955b
Previously, we'd export to global objects called spine.canvas, spine.webgl, spine.threejs. Going forward, all Spine APIs will be hosted by the global spine object when the runtime is used straight from the bundled .js files in the build/ folder. This is a minor change with a simple fix on the user side, i.e. replace spine.canvas. with spine.
137 lines
3.8 KiB
HTML
137 lines
3.8 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body,
|
|
html {
|
|
height: 100%
|
|
}
|
|
|
|
canvas {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|
|
<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.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.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);
|
|
}
|
|
|
|
init();
|
|
}());
|
|
</script>
|
|
</body>
|
|
|
|
</html> |