2019-11-20 18:09:12
围观(4315)
虽然不看动漫也不喜欢二次元。但是访问很多博客,发现右下角都有个动漫人物。
后来才知道,原来这玩意叫看板娘。
今天偶然的机会在 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
本文地址 : bubaijun.com/page.php?id=149
版权声明 : 未经允许禁止转载!
上一篇文章: PHP开发计算下一个节假日时间并倒计时
下一篇文章: 树洞-未来邮局开源