哈喽，大家近来如何？最近在筹划给博客增加一些互动性，考虑结合近期大火的大语言模型。API（可直接调用）都已经准备好了（后期成功部署后也准备与各位分享），正愁采用什么样的交互模式。在浏览博客的时候发现了这个动画，瞬间被吸引住了，而且考虑也是一个交互入口，当下决定带到博客里来。

当然，这个Live2D技术也并不只是在我当下使用的Hexo博客框架才能使用。各位感兴趣可以检索看看，是不是有迁移至你们喜欢平台的方案哈。话不多说，接下来分享给各位小伙伴。Enjoy~

Live2D技术前世今生

Live2D技术是一种2D立体表现技术，它允许2D图像在保持其独特形状和画风的同时，在三维空间中自由移动。这项技术由株式会社Live2D（原名サイバーノイズ，Cybernoids）开发。公司自2006年创立以来，一直专注于Live2D的技术研发。公司成立前9年没有进行任何的合同开发，也曾经历过多次濒临倒闭的境地。

在Live2D技术出现之前，要让2D角色动起来，通常需要通过手绘每一帧或者创建3D多边形模型来实现。这些方法不仅耗时耗力，而且往往会牺牲2D角色的原有风格。Live2D技术的出现解决了这些问题。它能够帮助制作方在不增加绘图量、保留原画艺术风格的基础上制作动态角色，相比采用3D或手绘动画来说，Live2D是一个性价比和制作效率更高的选项。

Live2D技术的第一个产品是Live2D Cubism，它允许角色在左右30度的范围内变化。随后，Live2D Euclid的开发使得角色可以实现360度的立体表现。目前，Live2D技术已经在游戏领域被广泛使用。该项技术的主要缺点在于无法实现大角度视角。结合最近看到的一些生成式人工技术，我想2D到3D投射的技术领域，应该很快也会有所突破。

在Hexo Next主题下的部署

主要分为三个部分：hexo-helper-live2d插件的安装、对应模型的安装（或引入）、Hexo博客yaml配置修改（不要在主题配置里增加）。

插件安装

我采用npm进行安装。

1	npm install --save hexo-helper-live2d

npm和hexo都容易出现版本问题，附我使用版本如下：

PS C:\Users\xxx> npm --version
10.8.2
PS C:\Users\xxx> node --version       
v21.7.2
PS C:\Users\xxx> hexo --version
hexo-cli: 4.3.2

关于npm版本问题，建议使用nvm进行版本管理。

模型安装

默认支持的数款模型预览可见：Hexo添加Live2D看板娘+模型预览。

个人比较喜欢：

live2d-widget-model-hijiki
live2d-widget-model-koharu
live2d-widget-model-shizuku
live2d-widget-model-tororo

接下来还是npm安装就好。

1	npm install <live2d-widget-model-xxx>

博客配置修改

在主题里配置可以使用模型，但是模型不能修改，属性也不生效。还是建议直接在博客配置里修改。位置参考如下：

写在后面

还会关注新的web交互新方式。love & peace。

参考资料

[1] 【Live2D】会社消滅寸前だったとあるベンチャーが、世界初の2D立体表現技術を完成できたワケ。https://type.jp/et/feature/161/。
[2] Live2D的介绍及在Web端的运用。https://tgideas.qq.com/gicp/news/475/8723118.html?form=list。
[3] https://github.com/EYHN/hexo-helper-live2d。