Hi, am trying to make run this demo without success !
https://github.com/EsotericSoftware/spine-runtimes/tree/4.0/spine-ts/spine-threejs/example
I get no error during creating the spine object, and everything look fine.
but when i try update this.skeletonMesh.update(delta);
3js say something wrong !
Am not sure what going wrong here since i have no issue with pixijs ! maybe i misunderstood something.
Here the demo in ES6,ES7 version, or if you have a better demo plz share !
ts
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
// import spine from "@esotericsoftware/spine-core";
import * as spine from "@esotericsoftware/spine-threejs"
class Application {
renderer: THREE.WebGLRenderer;
scene: THREE.Scene
camera: THREE.PerspectiveCamera;
orbitControls: OrbitControls;
testSpine: SpineObject;
constructor () {
// 3renderer
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setSize(1920, 1080);
this.renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(this.renderer.domElement);
//3view
this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 3000);
this.orbitControls = new OrbitControls(this.camera, this.renderer.domElement);
//3add
this.scene.add(this.camera);
this.camera.position.z = 5;
this.scene.add(new THREE.AxesHelper(2));
// 3spine
this.testSpine = new SpineObject(this.scene);
};
async initialize() {
await this.testSpine.load("raptor-pro.json", "raptor.atlas")
this.update(0);
};
update: FrameRequestCallback = (delta: number) => {
this.camera.updateProjectionMatrix();
this.orbitControls.update();
this.testSpine.update(delta)
this.renderer.render(this.scene, this.camera);
requestAnimationFrame(this.update);
};
};
// class where is handle the demo behavior
class SpineObject {
static readonly assetManager = new spine.AssetManager('assets/');
public skeletonMesh!: spine.SkeletonMesh;
public geometry: THREE.BoxGeometry;
public material: THREE.MeshBasicMaterial;
public mesh: THREE.Mesh;
public scene: THREE.Scene;
constructor (
scene?: THREE.Scene,
geometry?: THREE.BoxGeometry,
material?: THREE.MeshBasicMaterial,
mesh?: THREE.Mesh,
) {
this.scene = scene ?? new THREE.Scene();
this.material = material ?? new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe: true });
this.geometry = geometry ?? new THREE.BoxGeometry(2, 2, 2);
this.mesh = mesh ?? new THREE.Mesh(this.geometry, this.material);
this.scene.add(this.mesh);
}
async load(skeletonFile: string, atlasFile: string) {
await this.assetLoad(skeletonFile, atlasFile);
const atlas = SpineObject.assetManager.require(atlasFile);
const atlasLoader = new spine.AtlasAttachmentLoader(atlas);
const skeletonJson = new spine.SkeletonJson(atlasLoader);
skeletonJson.scale = 1;
const skeletonData = skeletonJson.readSkeletonData(SpineObject.assetManager.require(skeletonFile));
const skeletonMesh = new spine.SkeletonMesh(skeletonData, (parameters) => {
parameters.depthTest = false;
parameters.alphaTest = 0.5;
});
skeletonMesh.state.setAnimation(0, 'walk', true);
this.skeletonMesh = skeletonMesh;
/** ts COMPILER ERROR!
* Argument of type 'SkeletonMesh' is not assignable to parameter of type 'Object3D<Event>'
* Types of property 'parent' are incompatible.
*/
this.mesh.add(this.skeletonMesh);
}
assetLoad(skeletonFile: string, atlasFile: string,) {
SpineObject.assetManager.loadText(skeletonFile);
SpineObject.assetManager.loadTextureAtlas(atlasFile);
return new Promise<void>((resolve, reject) => {
const check = setInterval(() => {
if (!SpineObject.assetManager.isLoadingComplete()) return;
clearInterval(check);
resolve();
}, 1);
});
}
update(delta: number) {
// THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false !
this.skeletonMesh.update(delta);
}
}
export const $Application = new Application().initialize();
i also noticed inside demo, a error type where mesh.add(skeletonMesh); , am not sure if is can related, i just ignore it .
thanks in advance for tips and help !
ps: if i remove the spine this.skeletonMesh.update(delta);
the app rendering fine
