UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2025-12-21 01:36:02 +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> <title>spine-threejs</title>
<script src="https://unpkg.com/three@0.138.3/build/three.js"></script> <script src="https://unpkg.com/three@0.138.3/build/three.js"></script>
<script src="../dist/iife/spine-threejs.js"></script> <script src="../dist/iife/spine-threejs.js"></script>
<script src="assets/OrbitControls.js"></script>
</head> </head>
<style> <style>
* { * {
@ -27,20 +28,21 @@
<body> <body>
<script> <script>
(function () { (function () {
var scene, camera, renderer; let scene, camera, renderer;
var geometry, material, mesh, skeletonMesh; let geometry, material, mesh, skeletonMesh;
var assetManager; let assetManager;
var canvas; let canvas;
var lastFrameTime = Date.now() / 1000; let controls;
let lastFrameTime = Date.now() / 1000;
var baseUrl = "assets/"; let baseUrl = "assets/";
var skeletonFile = "raptor-pro.json"; let skeletonFile = "raptor-pro.json";
var atlasFile = skeletonFile.replace("-pro", "").replace("-ess", "").replace(".json", ".atlas"); let atlasFile = skeletonFile.replace("-pro", "").replace("-ess", "").replace(".json", ".atlas");
var animation = "walk"; let animation = "walk";
function init() { function init() {
// create the THREE.JS camera, scene and renderer (WebGL) // 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 = new THREE.PerspectiveCamera(75, width / height, 1, 3000);
camera.position.y = 100; camera.position.y = 100;
camera.position.z = 400; camera.position.z = 400;
@ -49,6 +51,7 @@
renderer.setSize(width, height); renderer.setSize(width, height);
document.body.appendChild(renderer.domElement); document.body.appendChild(renderer.domElement);
canvas = renderer.domElement; canvas = renderer.domElement;
controls = new OrbitControls(camera, renderer.domElement);
// load the assets required to display the Raptor model // load the assets required to display the Raptor model
assetManager = new spine.AssetManager(baseUrl); assetManager = new spine.AssetManager(baseUrl);
@ -74,37 +77,38 @@
atlasLoader = new spine.AtlasAttachmentLoader(atlas); atlasLoader = new spine.AtlasAttachmentLoader(atlas);
// Create a SkeletonJson instance for parsing the .json file. // 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. // Set the scale to apply during parsing, parse the file, and create a new skeleton.
skeletonJson.scale = 0.4; 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 // Create a SkeletonMesh from the data and attach it to the scene
skeletonMesh = new spine.SkeletonMesh(skeletonData, (parameters) => { skeletonMesh = new spine.SkeletonMesh(skeletonData, (parameters) => {
parameters.depthTest = false; parameters.depthTest = true;
parameters.alphaTest = 0.5; parameters.depthWrite = true;
parameters.alphaTest = 0.001;
}); });
skeletonMesh.state.setAnimation(0, animation, true); skeletonMesh.state.setAnimation(0, animation, true);
mesh.add(skeletonMesh); mesh.add(skeletonMesh);
requestAnimationFrame(render); requestAnimationFrame(render);
} else requestAnimationFrame(load); } else requestAnimationFrame(load);
} }
var lastTime = Date.now(); let lastTime = Date.now();
function render() { function render() {
// calculate delta time for animation purposes // calculate delta time for animation purposes
var now = Date.now() / 1000; let now = Date.now() / 1000;
var delta = now - lastFrameTime; let delta = now - lastFrameTime;
lastFrameTime = now; lastFrameTime = now;
// resize canvas to use full page, adjust camera/renderer // resize canvas to use full page, adjust camera/renderer
resize(); resize();
// rotate the cube // Update orbital controls
mesh.rotation.x = Math.sin(now) * Math.PI * 0.2; controls.update();
mesh.rotation.y = Math.cos(now) * Math.PI * 0.4;
// update the animation // update the animation
skeletonMesh.update(delta); skeletonMesh.update(delta);
@ -116,8 +120,8 @@
} }
function resize() { function resize() {
var w = window.innerWidth; let w = window.innerWidth;
var h = window.innerHeight; let h = window.innerHeight;
if (canvas.width != w || canvas.height != h) { if (canvas.width != w || canvas.height != h) {
canvas.width = w; canvas.width = w;
canvas.height = h; canvas.height = h;

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

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