【小工具】pixi-live2d-display，直接可用的live2d的交互网页/桌面应用

佩洛君

已于 2024-01-09 21:32:14 修改

阅读量2.5k

点赞数 15

分类专栏：小工具文章标签：交互 javascript 开发语言

于 2024-01-09 09:31:41 首次发布

本文链接：https://blog.csdn.net/qq_40248814/article/details/135471820

版权

效果：
在这里插入图片描述

<script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@6.5.2/dist/browser/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/extra.min.js"></script>

<canvas id=canvas></canvas>

<div id="control"></div>

<script type="text/javascript">
  const cubism2Model =
  "https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/shizuku/shizuku.model.json";
const cubism4Model =
  "https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/haru/haru_greeter_t03.model3.json";

const live2d = PIXI.live2d;

(async function main() {
     
  const app = new PIXI.Application({