spine动画插入网页教程,带自适应 (Pixijs) (觉得最好的方法)

找了一堆方法, 没一个好用的, 全是报错。最后在github上找到一个项目,整理优化了一下,把代码分享一下.
自己加了一个自适应。本地运行不行哦,可以放服务器上看.
demo https://temp.ordylan.cn/spinetest/
注意!图片名字里面不要有奇怪的符号,比如 & = 有的话可能会出问题.

<div id="app"></div> 
<script src="pixi.min.js"></script>
<script src="pixi-spine.js"></script>
<script>const app = new PIXI.Application({
    backgroundColor:0xFFFFFF,
    antialias:true,
    width:document.documentElement.clientWidth,
    height:document.documentElement.clientHeight
});
document.getElementById('app').appendChild(app.view);//div
let loader = PIXI.loader.add('ordylan','OD.json');//OD.json你的json
       var skinwidth = 1175.72;//这里写一个自适应,要换成皮肤长宽
       var skinheight = 818.79;//原理很简单,一点小学数学知识+平面直角坐标系知识即可
var beishu1 = document.documentElement.clientWidth/skinwidth;//2个缩放比例
var beishu2 = document.documentElement.clientHeight/skinheight;//理解成相似图形即可
if(beishu1 > beishu2){//比较选小的,防止出屏幕
    var beishu = beishu2;
}
else if(beishu1 == beishu2){
    var beishu = beishu1;
}
else if (beishu1 < beishu2){
    var beishu = beishu1;
}
loader.load((loader,res)=>{
    let ordylan = new PIXI.spine.Spine(res.ordylan.spineData),
        options = [''];
    ordylan.scale.set(beishu);//放大倍数
    ordylan.state.setAnimation(0,'loop',true);//loop你的动画名字 true 为循环播放
    ordylan.x = skinwidth*beishu/2;//O点在中间,所以xy 坐标 长宽除以二(导出记得把动画放在中央)
    ordylan.y = skinheight*beishu/2;
app.stage.addChild(ordylan);
});</script>

就这么简单啊哈哈,搞了快一年(为什么不早去gh上看看呢)
想支持我可以去csdn下 https://download.csdn.net/download/qq_42967357/86245394
没有积分/登录的直接去把demo扣下来~