UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2025-12-20 17:26:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts][threejs] Added orbital controls to threejs example.

Browse Source
This commit is contained in:
Mario Zechner 2022-03-22 00:27:27 +01:00
parent d080019e7b
commit 0486bbda74
3 changed files with 1276 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1248
spine-ts/spine-threejs/example/assets/OrbitControls.js Normal file
View File

File diff suppressed because it is too large Load Diff

48
spine-ts/spine-threejs/example/index.html
View File

@ -5,6 +5,7 @@
<title>spine-threejs</title>
<script src="https://unpkg.com/three@0.138.3/build/three.js"></script>
<script src="../dist/iife/spine-threejs.js"></script>
<script src="assets/OrbitControls.js"></script>
</head>
<style>
* {
@ -27,20 +28,21 @@
<body>
<script>
(function () {
var scene, camera, renderer;
var geometry, material, mesh, skeletonMesh;
var assetManager;
var canvas;
var lastFrameTime = Date.now() / 1000;
let scene, camera, renderer;
let geometry, material, mesh, skeletonMesh;
let assetManager;
let canvas;
let controls;
let 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";
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)
var width = window.innerWidth, height = window.innerHeight;
let width = window.innerWidth, height = window.innerHeight;
camera = new THREE.PerspectiveCamera(75, width / height, 1, 3000);
camera.position.y = 100;
camera.position.z = 400;
@ -49,6 +51,7 @@
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);
@ -74,37 +77,38 @@
atlasLoader = new spine.AtlasAttachmentLoader(atlas);
// Create a SkeletonJson instance for parsing the .json file.
var skeletonJson = new spine.SkeletonJson(atlasLoader);
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;
var skeletonData = skeletonJson.readSkeletonData(assetManager.require(skeletonFile));
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 = false;
parameters.alphaTest = 0.5;
parameters.depthTest = true;
parameters.depthWrite = true;
parameters.alphaTest = 0.001;
});
skeletonMesh.state.setAnimation(0, animation, true);
mesh.add(skeletonMesh);
requestAnimationFrame(render);
} else requestAnimationFrame(load);
}
var lastTime = Date.now();
let lastTime = Date.now();
function render() {
// calculate delta time for animation purposes
var now = Date.now() / 1000;
var delta = now - lastFrameTime;
let now = Date.now() / 1000;
let 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 orbital controls
controls.update();
// update the animation
skeletonMesh.update(delta);
@ -116,8 +120,8 @@
}
function resize() {
var w = window.innerWidth;
var h = window.innerHeight;
let w = window.innerWidth;
let h = window.innerHeight;
if (canvas.width != w || canvas.height != h) {
canvas.width = w;
canvas.height = h;

3
spine-ts/spine-threejs/tsconfig.json
View File

@ -11,7 +11,8 @@
}
},
"include": [
"**/*.ts"
"**/*.ts",
"src/OrbitControls.js"
],
"exclude": [
"dist/**/*.d.ts"