Garen Wang's Blog
0%

Hexo Live2d moc3 Configuration

Posted on Edited on

今天闲着给自己的博客整了个效果，在live2d这方面整点花活。

记录一下，顺便也给hexo博客搭建live2d的方式做一次梳理。

live2d模型一般有几种常见的格式，其中方便web端渲染呈现的有moc跟moc3两种格式。

一般我们从大佬们白嫖到live2d模型下载解压之后会是这样的格式：

以jiaran4为例：

  • jiaran4.2048或jiaran4.1024存放了模型的材质贴图
  • jiaran4.moc3为模型主体，为二进制文件
  • jiaran4.model3.json为模型的配置文件，会重点标注出其他文件的引用路径
  • jiaran4.physics3.json是物理演算配置文件
  • jiaran4.cdi3.json作为显示信息，不是很重要

比较豪华的live2d模型还有：

  • jiaran4.pose3.json，初始姿势配置文件
  • motions文件夹，内含若干个xxx.motion3.json的动作配置文件

moc模型

以我拿到的一个崩2德莉莎的模型为例，目的是想要在hexo博客上实装。

是hexo的话，可以方便地使用hexo-helper-live2d这么一个插件：

1
$ npm install --save hexo-helper-live2d

这个插件有若干个预设模型，随便扒拉几个看下：

1
$ npm install --save live2d-widget-model-shizuku

看下文件结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
.
├── assets
│   ├── exp
│   │   ├── f01.exp.json
│   │   ├── f02.exp.json
│   │   ├── f03.exp.json
│   │   └── f04.exp.json
│   ├── moc
│   │   ├── shizuku.1024
│   │   │   ├── texture_00.png
│   │   │   ├── texture_01.png
│   │   │   ├── texture_02.png
│   │   │   ├── texture_03.png
│   │   │   ├── texture_04.png
│   │   │   └── texture_05.png
│   │   └── shizuku.moc
│   ├── mtn
│   │   ├── flickHead_00.mtn
│   │   ├── flickHead_01.mtn
│   │   ├── flickHead_02.mtn
│   │   ├── idle_00.mtn
│   │   ├── idle_01.mtn
│   │   ├── idle_02.mtn
│   │   ├── pinchIn_00.mtn
│   │   ├── pinchIn_01.mtn
│   │   ├── pinchIn_02.mtn
│   │   ├── pinchOut_00.mtn
│   │   ├── pinchOut_01.mtn
│   │   ├── pinchOut_02.mtn
│   │   ├── shake_00.mtn
│   │   ├── shake_01.mtn
│   │   ├── shake_02.mtn
│   │   ├── tapBody_00.mtn
│   │   ├── tapBody_01.mtn
│   │   └── tapBody_02.mtn
│   ├── shizuku.model.json
│   ├── shizuku.physics.json
│   ├── shizuku.pose.json
│   └── snd
│       ├── flickHead_00.mp3
│       ├── flickHead_01.mp3
│       ├── flickHead_02.mp3
│       ├── pinchIn_00.mp3
│       ├── pinchIn_01.mp3
│       ├── pinchIn_02.mp3
│       ├── pinchOut_00.mp3
│       ├── pinchOut_01.mp3
│       ├── pinchOut_02.mp3
│       ├── shake_00.mp3
│       ├── shake_01.mp3
│       ├── shake_02.mp3
│       ├── tapBody_00.mp3
│       ├── tapBody_01.mp3
│       └── tapBody_02.mp3
└── package.json

6 directories, 48 files

如果我们有一个moc模型的话，就可以考虑模仿这样的文件格式安排，伪装成能被插件正常执行的模型包，在hexo里面跑起来。

最后我把原来的模型包修改成了这样：

这里有一点需要注意：.model3.json文件内含relative file reference，在调整文件结构的时候也需要把里面的内容也做改动。

最终效果是这样的：

moc3模型

不过这几年来新的模型大多以moc3的格式来传播，用原来moc格式的办法没法直接套用，尝试另外的解决方案。

moc3模型以嘉然为例（然然你带我走吧然然

第一种尝试是从这几个repo来看看能不能伪装格式一起套用：

然后发现不行，遂放弃。

第二种尝试来自这篇博客：https://www.cnblogs.com/Arisf/p/14347362.html

首先是需要live2d cubism有关的几个js：

  • bundle.js，似乎需要自己生成
  • live2dcubismcore.js，是官方web sdk的

相应所需要的js文件跟模型都一起放在了我github的repo里面，感谢开源，侵删。

可以首先在本地上试试能不能跑起来。事实上把这几行代码一起粘到body标签里面就好了：

1
2
3
4
5
6
7
8
9
 <canvas id="live2d" width="400" height="400" class="live2d" style="position: fixed; opacity: 1; left: -110px; bottom: -135px; z-index: 99999; pointer-events: none;"></canvas>
 <script src="https://cdn.jsdelivr.net/gh/Garen-Wang/live2d-moc3@vv0.1.1/js/live2dcubismcore.js"></script>
 <script src="https://cdn.jsdelivr.net/gh/Garen-Wang/live2d-moc3@vv0.1.1/js/bundle.js"></script>
 <script>
     var resourcesPath = 'https://cdn.jsdelivr.net/gh/Garen-Wang/live2d-moc3@v0.1.0/'; // 指定资源文件（模型）保存的路径，使用github的release版本，路径如下https://cdn.jsdelivr.net/gh/用户/库@版本号/资源路径
     var backImageName = ''; // 指定背景图片 ,默认为空
     var modelDir = ['jiaran4']; // 指定需要加载的模型
     initDefine(resourcesPath, backImageName, modelDir); // 初始化模型</script>
</script>

其中不知道是cdn抽风还是什么奇怪的原因，原本应该是v0.1.1的地方需要是vv0.1.1才访问得到，非常奇怪。

如果正常的话应该是这样子：

接下来把然然带进hexo博客里面。由于我用的NexT主题，修改themes/next/layout/_layout.swig，直接在body标签的最后边粘上去这几行，做法非常暴力。

不出意外的话然然应该就能跟爷同框了，像下面这样（