L2Dwidget.js网页看板娘的使用总结

最新推荐文章于 2024-08-09 07:34:37 发布

邵怀林

最新推荐文章于 2024-08-09 07:34:37 发布

阅读量8.9k

点赞数 13

分类专栏：前端文章标签： javascript html5

本文链接：https://blog.csdn.net/Blog_ShaoHuaiLin/article/details/105818795

版权

本文详细介绍了如何生成和使用L2Dwidget.min.js脚本，创建网页上的动漫人物看板娘。内容包括获取源码、编译生成脚本、模型替换、弹出对话框的实现以及如何手动调用对话框，为开发者提供了完整的操作步骤。

摘要由CSDN通过智能技术生成

最近在浏览某些博客的途中，发现了一个有趣的东西，网页上出现了一个非常可爱的动漫人物，眼睛还会随着鼠标移动，真是太可爱了。
百度上有很多关于这个看板娘的教程，但都是告诉添加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,
  }