- Edited
Hello dear friends,
i am tried to add some spine animation to my React app and it dont work (
Maybe i do something wrong?
i install npm packet "@esotericsoftware/spine-player": "4.2.18",
The component render a div but w/o any animation inside.
Please help me
Here is my code
import { useEffect, useRef } from "react";
import atlasData from "../../images/spine/ai_girl/ai_girl.atlas";
import jsonData from "../../images/spine/ai_girl/ai_girl.json";
import imageData from "../../images/spine/ai_girl/ai_girl.png";
import { SpinePlayer } from "@esotericsoftware/spine-player";
export default function SpineAnimationGirl() {
const spineRef = useRef(null);
const spineRoot = document.querySelector("#spine");
useEffect(() => {
if (spineRoot) {
const spinePlayer = new SpinePlayer();
spinePlayer.load({
atlasText: atlasData,
jsonText: jsonData,
texture: imageData,
});
spinePlayer.trackEntry.setAnimation(0, "idle_anim", true);
spineRoot.appendChild(spinePlayer.canvas);
}
}, []);
return <div id="spine" style={{ width: "800px", height: "600px" }}></div>;``