L2Dwidget.js网页看板娘的使用总结 |
您所在的位置：网站首页 › 少女前线看板娘对话框 › L2Dwidget.js网页看板娘的使用总结 |
L2Dwidget.js网页看板娘的使用总结
|
最近在浏览某些博客的途中，发现了一个有趣的东西，网页上出现了一个非常可爱的动漫人物，眼睛还会随着鼠标移动，真是太可爱了。 百度上有很多关于这个看板娘的教程，但都是告诉添加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下来的目录： 命令成功后，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 |
刚Git下来的目录，是没有 lib和 node_modules目录的。 接下来我们安装依赖和编译项目，在当前目录打开命令窗口，输入如下命令：【本文地址】