封面《FLIP * FLOP ~RAMBLING OVERRUN~》

前言

每次看到网站的live2d模型的时候都会想只有nep是喜欢的,想要添加模型发现这个库只支持moc2模型,不支持moc3模型,虽然可以加但是作者并没有加,只是给了一份pr,但是这个pr已经是两年前了,不如自己重新写一下。

做法

参考pr中的代码,其实很简单,就是采用了pixi-live2d-display这个库来加载模型,该库支持各个版本的live2d模型,因此只需要修改原来的加载模型代码loadlive2d函数即可。

首先按照pixi-live2d-display这个库来安装,

1
npm install pixi-live2d-display

然后下载live2d-widget的源码,修改src/model.js文件,新增下面函数,将loadlive2d函数修改为该函数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import * as PIXI from "pixi.js";
import { Live2DModel } from "pixi-live2d-display";

// expose PIXI to window so that this plugin is able to
// reference window.PIXI.Ticker to automatically update Live2D models
window.PIXI = PIXI;

async loadModelPixi(id, jsonpath) {
const element = document.getElementById(id);
const app = new PIXI.Application({
view: element,
transparent: true,
});
const model = await Live2DModel.from(jsonpath);

app.stage.addChild(model);

const parentWidth = element.width;
const parentHeight = element.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;

}

该函数显而易见,加载模型后设置缩放和位置,需要注意的是在代码里面我们可以看到<canvas id="live2d" width="800" height="800"></canvas>,而css里面可以看到

1
2
3
4
5
6
#live2d {
cursor: grab;
height: 300px;
position: relative;
width: 300px;
}

这里其实是live2d先在800×800上面画,然后通过css缩放到300×300,这样子会看的高清一点,live2d看起来会很模糊

效果如下,其实比例上还是有点小问题需要调整一下
result

完整代码在github,也可以直接直接在网页中添加下面这行代码添加live2d到网站

<script src="https://jsd.cdn.zzko.cn/gh/qxdn/live2d-widget@latest/autoload.js"></script>

后记

该代码其实还是有点小缺陷,即模型对准buttom其实还是有点对不准,如果可以看到loadlive2d的实现可能效果会好一点。

参考文献