Hexo添加Live2D看板娘+模型预览

添加和注意事项

关于如何添加,可以看这里:https://www.jianshu.com/p/3a6342e16e57
模型的GitHub地址:https://github.com/xiazeyu/live2d-widget-models
需要注意:

  1. live2d-widget-model-haru模型需要安装npm install live2d-widget-model-haru
  2. 在使用的时候,live2d-widget-model-haru有两个模型,所以在使用的时候,是这样的:

    use: live2d-widget-model-haru/01 或者
    use: live2d-widget-model-haru/02

  3. 01和02的json文件是空的,所以需要把live2d-widget-model-haru文件夹下的json文件复制进去

模型预览

以下模型均是在width: 150height: 300下截得

live2d-widget-model-chitose

live2d-widget-model-chitose

live2d-widget-model-epsilon2_1

live2d-widget-model-epsilon2_1

live2d-widget-model-gf

live2d-widget-model-gf

live2d-widget-model-haru_01

live2d-widget-model-haru_01

live2d-widget-model-haru_02

live2d-widget-model-haru_02

live2d-widget-model-haruto

live2d-widget-model-haruto

live2d-widget-model-hibiki

live2d-widget-model-hibiki

live2d-widget-model-hijiki

live2d-widget-model-hijiki

live2d-widget-model-izumi

live2d-widget-model-izumi

live2d-widget-model-koharu

live2d-widget-model-koharu

live2d-widget-model-miku

live2d-widget-model-miku

live2d-widget-model-nico

live2d-widget-model-nico

live2d-widget-model-nietzsche

live2d-widget-model-nietzsche

live2d-widget-model-ni-j

live2d-widget-model-ni-j

live2d-widget-model-nipsilon

live2d-widget-model-nipsilon

live2d-widget-model-nito

live2d-widget-model-nito

live2d-widget-model-shizuku

live2d-widget-model-shizuku

live2d-widget-model-tororo

live2d-widget-model-tororo

live2d-widget-model-tsumiki

live2d-widget-model-tsumiki

live2d-widget-model-unitychan

live2d-widget-model-unitychan

live2d-widget-model-wanko

live2d-widget-model-wanko

live2d-widget-model-z16

live2d-widget-model-z16

根据引用中的代码,live2d.vue是一个以Vue组件的形式创建的文件,用于方便控制显示。在这个文件中,通过引入/public/js/bundle.js和/public/js/live2dcubismcore.js这两个文件,实现了Live2D模型的显示和控制逻辑。同时,在文件的最后使用了<script setup>标签来编写相关的逻辑代码。注意,为了方便资源读取,需要将live2d所需的js文件和打包后的ts的js文件放在public文件夹中,并且根据自己的资源路径进行相应的文件导入配置。 根据引用中的内容,可以看到在使用Live2D的过程中,首先需要安装Hexo博客,并安装Live2D作为运行环境。然后,下载动画资源并进行配置。对于Vue项目,可以参考相关的拓展资源来使用这些资源。 最后,引用中提到了live2d-widget-model-hijiki这个模型的使用配置,可以根据需要进行相应的配置。运行hexo博客进行预览,如果没有问题,那么live2d vue组件的使用就可以开始了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue3组件中使用live2d看板娘(官方包形式)](https://blog.csdn.net/qq_39123467/article/details/131801240)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [在自己项目或者 vue 中使用可爱的二次元((Live2D)](https://blog.csdn.net/Jioho_chen/article/details/89419170)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值