给网页加个看板娘

虽然不看动漫也不喜欢二次元。但是访问很多博客，发现右下角都有个动漫人物。

后来才知道，原来这玩意叫看板娘。

今天偶然的机会在 Laravel 的论坛上看到有人说了一下看板娘。

得知有这样一个站点：

梦象 https://mx-model.ga/ [梦象，一个专注于 Live2D 模型的资源站]

然后看到 【梦象】 里面还有一篇文章是教怎么使用模型实现看板娘的。

就是这篇： https://mx-model.ga/course/how-to-use-models.html

该文章说到，需要引入一个 live2d.min.js 文件，该文件开源于： https://github.com/journey-ad/live2d_src 在该项目的 src/lib 目录下。

看完之后，二话不说。马上下载了一个模型，复制该文章的代码，修改代码里面的路径。

所有操作一气呵成。然后直接双击 html 文件，发现报错：

loadlive2d is not defined

然后打开了上面说到的 live2d.min.js 文件，用工具进行 js 解压/格式化。发现确实没有 loadlive2d 这个方法。

然后突发奇想查看了 【梦象】 某个页面的源代码。发现该网站用的并不是 live2d.min.js 。

然后我把该站用的 js 文件给下载了。文件名为：l2d.js

把 live2d.min.js 替换为 l2d.js 发现不会报原来的错误了。但是报了另外一个新的错误：

Access to XMLHttpRequest at 'file:///C:/Users/xxx/Desktop/test/model/model.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

这些错误对一个经常敲代码的程序猿来说，一目了然，就是跨域问题。

然后用 phpstudy 设置了一个 .test 的域名并设置 host

然后访问该域名，效果出来了：

至此，看板娘已经实现了，还是挺可爱的。

看了一下控制台的网络请求，发现这看板娘模型还是挺占带宽的。所以 放弃了在博客上添加看板娘的想法。

最后，放上测试的看板娘静态DEMO：https://pan.baidu.com/s/1H9APitHSlCh4IBEnfkDB2g 提取码：hu9a