最近在浏览某些博客的途中,发现了一个有趣的东西,网页上出现了一个非常可爱的动漫人物,眼睛还会随着鼠标移动,真是太可爱了。
百度上有很多关于这个看板娘的教程,但都是告诉添加L2Dwidget.min.js这个脚本,然后使用。关于 L2Dwidget.min.js 这个脚本的源码怎么来的,却没有说明。如果想直接使用的,可以跳过第一部分。
1.关于脚本的生成
L2Dwidget.min.js 的源码在https://github.com/xiazeyu/live2d-widget.js.git,起初我以为在git中会找到这个脚本文件,但是却失望了。L2Dwidget.min.js 脚本是需要编译生成的。
首先我们把项目git下来(master分支),此项目是基于nodeJs的,如果不会nodeJs,需要先去了解下。
这是我git下来的目录:
刚Git下来的目录,是没有 lib和 node_modules目录的。
接下来我们安装依赖和编译项目,在当前目录打开命令窗口,输入如下命令:
cnpm install
命令成功后,node_modules目录就生成了,这是这个项目需要的依赖包。
打开package.json,可以看到这个项目的结构情况。可以看到有执行的脚本:
{
"scripts": {
//省略
"inst:dev": "npm install -g commitizen && npm install -g conventional-changelog-cli && npm install",
"build:dev": "./node_modules/.bin/webpack --progress --colors",
"build:prod": "./node_modules/.bin/webpack --env prod --progress --colors && npm run build:module",
//省略
}
执行脚本,编译项目:
cnpm run build:dev
运行后,会看到lib目录生成了,L2Dwidget.min.js和L2Dwidget.0.min.js脚本成功生成。
(cnpm run build:dev 运行后,一直不退到输入界面,我也不清楚为什么。)
2.脚本使用
我们运行项目下的 dev.html文件,就可以看到效果。里面就一句代码:
L2Dwidget.init();
默认加载的是 live2d-widget-model-shizuku
这个模型,在 src/config/defaultConfig.js
中可以看到默认配置如下:
const defaultConfig = {
model: {
jsonPath: 'https://unpkg.com/live2d-widget-model-shizuku@latest/assets/shizuku.model.json',
scale: 1,
}