amass/live2d-widget
1
0
Fork 0
mirror of https://github.com/stevenjoezhang/live2d-widget.git synced 2024-11-22 20:59:59 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: migrate to pixi-live2d-widget

Browse Source
This commit is contained in:
perqin 2021-07-10 16:22:33 +08:00
parent b5a431b25f
commit 5649bbf5b6
4 changed files with 44 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@ -35,6 +35,20 @@ Font Awesome (v4 or v5) is required for this plugin. Take Font Awesome v4 as an
``` ```
否则图标将无法正常显示。（如果网页中已经加载了任何版本的 Font Awesome，就不要重复加载了） 否则图标将无法正常显示。（如果网页中已经加载了任何版本的 Font Awesome，就不要重复加载了）
本插件使用[pixi-live2d-display](https://github.com/guansss/pixi-live2d-display)组件以支持渲染所有版本的Live2D模型。为此，你需要添加PixiJS和pixl-live2d-display依赖。例如，要支持所有版本的模型，则需要添加如下依赖：
```html
<!-- PixiJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.10/pixi.min.js"></script>
<!-- Live2D v2.1 -->
<script src="https://cdn.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js"></script>
<!-- Live2D v3 -->
<script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
<!-- pixi-live2d-display -->
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/index.min.js"></script>
```
关于Live2D SDK、PixiJS版本的支持情况，请查阅pixi-live2d-display的文档。
## 使用 Usage ## 使用 Usage
将这一行代码加入 `<head>` 或 `<body>`，即可展现出效果： 将这一行代码加入 `<head>` 或 `<body>`，即可展现出效果：

3
autoload.js
View File

@ -24,11 +24,10 @@ function loadExternalResource(url, type) {
}); });
} }
// 加载 waifu.css live2d.min.js waifu-tips.js // 加载 waifu.css waifu-tips.js
if (screen.width >= 768) { if (screen.width >= 768) {
Promise.all([ Promise.all([
loadExternalResource(live2d_path + "waifu.css", "css"), loadExternalResource(live2d_path + "waifu.css", "css"),
loadExternalResource(live2d_path + "live2d.min.js", "js"),
loadExternalResource(live2d_path + "waifu-tips.js", "js") loadExternalResource(live2d_path + "waifu-tips.js", "js")
]).then(() => { ]).then(() => {
initWidget({ initWidget({

1
live2d.min.js vendored
View File

File diff suppressed because one or more lines are too long

33
waifu-tips.js
View File

@ -3,6 +3,24 @@
* https://github.com/stevenjoezhang/live2d-widget * https://github.com/stevenjoezhang/live2d-widget
*/ */
let pixiApp;
/**
* Load Live2D model into the PIXI application.
*/
async function loadlive2dPixi(jsonPath) {
const model = await PIXI.live2d.Live2DModel.from(jsonPath);
pixiApp.stage.addChild(model);
const parentWidth = pixiApp.renderer.width;
const parentHeight = pixiApp.renderer.height;
// Scale to fit the stage
const ratio = Math.min(parentWidth / model.width, parentHeight / model.height);
model.scale.set(ratio, ratio);
// Align bottom and center horizontally
model.x = (parentWidth - model.width) / 2;
model.y = parentHeight - model.height;
}
function loadWidget(config) { function loadWidget(config) {
let { waifuPath, apiPath, cdnPath } = config; let { waifuPath, apiPath, cdnPath } = config;
let useCDN = false, modelList; let useCDN = false, modelList;
@ -19,7 +37,7 @@ function loadWidget(config) {
sessionStorage.removeItem("waifu-text"); sessionStorage.removeItem("waifu-text");
document.body.insertAdjacentHTML("beforeend", `<div id="waifu"> document.body.insertAdjacentHTML("beforeend", `<div id="waifu">
<div id="waifu-tips"></div> <div id="waifu-tips"></div>
<canvas id="live2d" width="800" height="800"></canvas> <canvas id="live2d"></canvas>
<div id="waifu-tool"> <div id="waifu-tool">
<span class="fa fa-lg fa-comment"></span> <span class="fa fa-lg fa-comment"></span>
<span class="fa fa-lg fa-paper-plane"></span> <span class="fa fa-lg fa-paper-plane"></span>
@ -30,6 +48,13 @@ function loadWidget(config) {
<span class="fa fa-lg fa-times"></span> <span class="fa fa-lg fa-times"></span>
</div> </div>
</div>`); </div>`);
// Create PIXI application
const live2dCanvas = document.getElementById('live2d');
pixiApp = new PIXI.Application({
view: live2dCanvas,
resizeTo: live2dCanvas,
transparent: true,
});
// https://stackoverflow.com/questions/24148403/trigger-css-transition-on-appended-element // https://stackoverflow.com/questions/24148403/trigger-css-transition-on-appended-element
setTimeout(() => { setTimeout(() => {
document.getElementById("waifu").style.bottom = 0; document.getElementById("waifu").style.bottom = 0;
@ -213,9 +238,9 @@ function loadWidget(config) {
if (useCDN) { if (useCDN) {
if (!modelList) await loadModelList(); if (!modelList) await loadModelList();
const target = randomSelection(modelList.models[modelId]); const target = randomSelection(modelList.models[modelId]);
loadlive2d("live2d", `${cdnPath}model/${target}/index.json`); loadlive2dPixi(`${cdnPath}model/${target}/index.json`);
} else { } else {
loadlive2d("live2d", `${apiPath}get/?id=${modelId}-${modelTexturesId}`); loadlive2dPixi(`${apiPath}get/?id=${modelId}-${modelTexturesId}`);
console.log(`Live2D 模型 ${modelId}-${modelTexturesId} 加载完成`); console.log(`Live2D 模型 ${modelId}-${modelTexturesId} 加载完成`);
} }
} }
@ -226,7 +251,7 @@ function loadWidget(config) {
if (useCDN) { if (useCDN) {
if (!modelList) await loadModelList(); if (!modelList) await loadModelList();
const target = randomSelection(modelList.models[modelId]); const target = randomSelection(modelList.models[modelId]);
loadlive2d("live2d", `${cdnPath}model/${target}/index.json`); loadlive2dPixi(`${cdnPath}model/${target}/index.json`);
showMessage("我的新衣服好看嘛？", 4000, 10); showMessage("我的新衣服好看嘛？", 4000, 10);
} else { } else {
// 可选 "rand"(随机), "switch"(顺序) // 可选 "rand"(随机), "switch"(顺序)