封面《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函数修改为该函数：

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里面可以看到

#live2d {
	cursor: grab;
	height: 300px;
	position: relative;
	width: 300px;
}

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

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

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

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

后记

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

live2d-widget添加moc3模型支持

前言

做法

后记

参考文献