ネコのメモ帳
·
Hexo-Fluid下的live2d 3.x看板娘实现
💡
原文中文，约6700字，阅读约需16分钟。
📝
内容提要
本文介绍了如何在Hexo博客中实现Live2D看板娘，包括安装Live2D Cubism SDK、配置模型文件、修改代码使看板娘跟随鼠标移动、调整背景透明度，以及修改模型大小的方法。建议参考其他项目以优化体验。
🎯
关键要点
- 在Hexo博客中实现Live2D看板娘需要安装Live2D Cubism SDK和Node.js。
- 导入自己的模型时，需要将模型文件放在指定目录，并确保文件名与文件夹一致。
- 修改代码使看板娘能够跟随鼠标移动，需添加鼠标移动事件的监听。
- 调整背景透明度以去除canvas中的背景，确保看板娘的展示效果。
- 修改模型大小和中心点的方法包括调整cubismmodelmatrix.ts文件中的宽高设置。
- 建议参考其他项目以优化看板娘的体验，解决模型显示和交互问题。
❓
延伸问答
如何在Hexo博客中安装Live2D看板娘？
在Hexo博客中安装Live2D看板娘需要安装Live2D Cubism SDK和Node.js，并通过npm安装TypeScript。
如何导入自己的Live2D模型？
将模型文件放在指定的ResourcesPath目录下，并确保文件名与文件夹一致，然后在lappdefine.ts中添加模型名称。
如何让看板娘跟随鼠标移动？
需要在lappdelegate.ts中添加鼠标移动事件的监听，替换默认的鼠标按键跟随功能。
如何调整看板娘的背景透明度？
在lappdelegate.ts中将gl.clearColor的alpha值修改为0，以去除canvas中的背景。
如何修改Live2D模型的大小和中心点？
可以通过修改cubismmodelmatrix.ts文件中的setWidth和setHeight方法来调整模型的大小。
有什么建议可以优化Live2D看板娘的体验？
建议参考其他项目以解决模型显示和交互问题，添加自定义方法以优化体验。
➡️
