一、自建live2d运行
1、选择SDK——live2d Cubism SDK
（1）链接：Live2D Cubism SDK | Live2D Cubism
打开网站，它长这样：
（2）选择web ，到下个页面
（3）下载
勾选同意，填写邮箱，点击下载，得到一个压缩包
注意：如果你需要完整的的SDK按上文来就行，实际这篇文章主要用到内容是code文件夹里的js文件
2、文件复制与引用
（1）将下好的 live2dcubismcore.min.js 文件复制到public目录下。
如果步骤1内下的文件夹，找到core进入即可，如下图：
复制文件：
（2）安装依赖库：
npm add pixi-live2d-display pixi.js@6.x // 下面的库目前只支持到6.x
//安装pixi和pixi-live2d-display
npm add pixi-live2d-display 安装后会在node_modules中显示：
（3）index文件内引入
找到项目的index.html文件，一般在public文件夹内或和public同级，引入 live2dcubismcore.min.js 文件（如上图我的public内，有index.html文件）
<body>
<div id="app">
<script src="live2dcubismcore.min.js"></script>
<!-- 这是引入的语句，需要写在body内的大div中，相对路径引入 -->
</div>
</body>（4）App.vue文件内导入
找到App.vue文件，一般在：src文件夹内
<script>
//以下需要引入：
import * as PIXI from 'pixi.js';
import {Live2DModel} from 'pixi-live2d-display/cubism4';
window.PIXI = PIXI; // 为了pixi-live2d-display内部调用
let app; // 为了存储pixi实例
let model; // 为了存储live2d实例
export default {
//需要引入：
async mounted() {
app = new PIXI.Application({
view: this.$refs.liveCanvas,//ref组件绑定，liveCanvas为下文自定义的
autoStart: true, //是否开启自动播放
resizeTo: window,
backgroundAlpha: 0, //透明度
});
// 这里是放live2d资源的地方，直接相对路径引用即可
model = await Live2DModel.from('../public/HeiJiao/openSource.model3.json');
app.stage.addChild(model);
model.scale.set(0.2); // 调整缩放比例,0.1-0.2整体比较合适
},
//需要引入
beforeUnmount() {
model?.destroy();
app?.destroy();
}
}
</script>
<template>
<div class="app">
<!-- 自定义ref="liveCanvas"： -->
<canvas ref="liveCanvas"></canvas>
</div>
</template>
<style scoped>
.app{
background-color: #f1e6aa;
}
header {
line-height: 1.5;
}
</style>
3、下载live2d资源包：
这里推荐大家去B站上找一些最新的live2d资源包，现在它内容的主流架构（5.0、4.0）大致这样
老版本的2.0这样：
记得更新：App.vue文件：
model = await Live2DModel.from('../public/HeiJiao/openSource.model3.json');
//替换为你的model3.json文件的相对路径4、运行与演示：
npm run dev运行项目，比如我的，如下图，还是比较大的，哈哈。
网上（github）的多数项目live2d版本比较老，更新时间都在3-6年前不等，文件版本多为cubism2.0（现cubism版本主流为4.0、5.0），直接使用可能存在不兼容等问题。不过老版本自有老版本的强大，直接使用就行！
二、直接套用：
基于：live2d_api
1、最懒人方法：
直接在你的项目index.html文件中引入，即可！
<script src="https://fastly.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
运行图：右下角的小人，就是啦~，最简单轻松，一行代码搞定！
2、高度自定义
本方法来源于：在vue项目添加live2d可交互的看板娘_vue项目live2d.min.j waifu-tips-CSDN博客
大家可以直接在文内顶部下载，放到对应位置，然后在：App.vue中引入即可：
<template>
<div id="app">
<PhyLive2d v-if="showLive2D" ref="live2d"></PhyLive2d>
<!-- 引用组件 -->
</div>
</template>
<script>
import PhyLive2d from '@/components/Live2d/index.vue'
//导入
export default {
name: 'App',
components: { PhyLive2d, ThemePicker },
……
//其它代码
}
</script>三、集成方法
----便捷使用+自定义live2d模型（适用于cubism4.0、5.0版本）
（1）npm安装
直接安装 "live2d-render" ，这是一位B站大佬写的插件库，同时满足了便捷使用与live2d自定义，两个愿望一次满足！
npm install live2d-render
//npm安装（2）修改App.vue文件：
<script>
//复制下文script的内容稍作修改即可，其余地方不用
import { onMounted } from 'vue';
import * as live2d from 'live2d-render';
export default {
setup() {
onMounted(async () => {
await live2d.initializeLive2D({
BackgroundRGBA: [0.0, 0.0, 0.0, 0.0],
ResourcesPath: '../public/HeiJiao/openSource.model3.json',
//这是你自己的live2d资源文件，相对路径引用即可
CanvasSize: {
height: 500,
width: 400
}
})
console.log('finish loading');
});
},
}
</script>
<template>
<div class="app">
</div>
</template>（3）运行！
//控制台输入：
$Env:NODE_OPTIONS="--openssl-legacy-provider"
npm run dev这个样子，如图：
来源：Live2dRender
贴几个地址：
1、很多live2d项目的源头api：live2d_api ，这是大佬！
2、目前start算最多的live2d项目，live2d-widget，超级好用的
3、live2d模型库，大多是2.0版本的：live2d资源库
4、也是一个live2d模型库，但内容相对更多一些：资源库
最后大家用的哪一个呢？
3903
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
