项目地址: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吧~^^