站点图标 Ayumi Moe

在网页上部署Live2D

项目地址:GitHub – HCLonely/Live2dV3: 在网页上添加 moc3 格式的Live2d模型

最近看到很多大佬的博客都有一个可爱l2d人物。于是我也想给自己网站部署一个,便去搜了一圈,发现在WordPress上有这样的插件,安装即用一键部署,非常的方便好用。

但只能使用现有模型(moc)。而我想要使用自己l2d模型(.moc3),只能寻找别的方案。

于是我找到了这个项目,可以在网页上添加.moc3格式的Live2d模型。

食用方法非常简单,会简单的网站操作就可以。


1.首先去github上clone一份。

2.编辑index.html,修改两个参数。

basePath填入引用l2d的资源地址,可以是引用网络资源
modelName填入l2d文件名
souds填入引用l2d的语音资源地址

具体的Assets资源文件命名格式参考作者的demo。

3.部署在网页上

如果你需要在WordPress上的主页使用。

那么就在header.php插入标签即可。

以我使用我的Sakura Theme举例

/www/wwwroot/www.xxx.com/wp-content/themes/sakura/header.php

</body>标签前复制粘贴即可。

需注意的是作者使用的相对路径,这也意味着你需要把插件放入同级目录下。

比如/www/wwwroot/www.xxx.com/wp-content/themes/sakura/


1.关于L2D,在使用的L2D资源的时候,碰到了问题。加载了模型却无法显示,只有一个色块。经过排查,发现L2D,需要有Pixel per Unit参数,不能为1。如果是1说明L2D资源无法正常使用。一般的,像Azurlane的资源都是带有Pixel per Unit,可正常使用。

2.在使用模型之前可以使用Cubism Viewer (for OW)预览模型。

3.在本地调试会出现跨域无法请求资源的问题,这跟加载模型的js库有关。

4.注意模型是有版权保护的,切忌拿来商业用途。

感谢HCLonely大佬的插件~

本次教程就到这里,赶紧试试在网站上部署一个可爱的L2D吧~^^