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