mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2026-02-06 07:14:55 +08:00
[ts] Minor touch up of threejs example.
This commit is contained in:
Mario Zechner
parent
bf347df8af
commit
187b2d88f1
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user