On
the left side of video is JS code. simple index.html with JS SpinePlayer. On the right side it react APP.
i want the behavior be like in react app.
Nothing from viewport is working. This is my left size index.html
#spine-container {
width: 250px;
height: 250px;
position: fixed;
bottom: 0;
right: 0;
z-index: 9999;
cursor: pointer;
box-sizing: border-box;
}
<main class="relative">
<section className="fixed -bottom-4 -right-4 z-10">
<div id="spine-container"> </div>
</section>
</main>
new spine.SpinePlayer("spine-container", {
jsonUrl: "spider.json",
atlasUrl: "spider.atlas",
rawDataURIs: {
"spider.json":data:application/json;base64,${jsonBase64},
"spider.atlas":data:application/octet-stream;base64,${atlasBase64},
"spider.png":data:image/png;base64,${pngBase64}`
},
preserveDrawingBuffer: false,
showControls: false,
showLoading: false,
backgroundColor: "#00000000",
fullScreenBackgroundColor: '#00000000',
alpha: true,
scale: 1,
viewport: {
width: 250,
height: 250,
padLeft: "0%",
padRight: "0%",
padTop: "0%",
padBottom: "0%",
debugRender: true,
fitToCanvas: true,
},
debugRender: true,// Optional: Show the viewport bounds for debugging
animation: "idle",
success: () => console.log("Spine animation loaded!"),
error: (err) => console.error("SpinePlayer Error:", err)
});
and this is my react component that behavs as i want without any resizing
import { useEffect, useRef, useState } from "react";
import "@esotericsoftware/spine-player/dist/spine-player.css";
import { SpinePlayer } from "@esotericsoftware/spine-player";
type Props = {
animation: string;
onSpineClick?: () => void;
};
export function SpineViewer(props: Props) {
const containerRef = useRef<HTMLDivElement | null>(null);
const playerRef = useRef<SpinePlayer | null>(null);
const [isReady, setIsReady] = useState(false);
useEffect(() => {
if (!containerRef.current || playerRef.current) return;
playerRef.current = new SpinePlayer(containerRef.current, {
jsonUrl: "/spider/Spider-ready-psd.json",
atlasUrl: "/spider/spider.atlas",
animation: props.animation,
alpha: true,
backgroundColor: "#00000000",
showControls: false,
// backgroundColor: "#cccccc",
// viewport: {
// debugRender: true,
// },
success: () => {
console.log("Spine player loaded successfully.");
setIsReady(true);
},
});
return () => {
playerRef.current?.dispose();
playerRef.current = null;
setIsReady(false);
};
}, []);
// Change animation only when ready
useEffect(() => {
if (isReady && playerRef.current) {
playerRef.current.setAnimation(props.animation, true);
}
}, [props.animation, isReady]);
return (
<div
onClick={props.onSpineClick}
ref={containerRef}
style={{
width: "150px",
height: "150px",
zIndex: 10,
cursor: "pointer", // Optional visual cue
visibility: isReady ? "visible" : "hidden", // hide until ready
}}
/>
);
}
`
