不败君

前端萌新&初级后端攻城狮

给网页加个看板娘

给网页加个看板娘

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

然后访问该域名,效果出来了:

1.png

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

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

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

本文地址 : bubaijun.com/page.php?id=149

版权声明 : 未经允许禁止转载!

评论:我要评论

儿也太 沙发

⎛⎝。◕⏝⏝◕。⎠⎞

评论时间:2019-11-21 14:33:19

回复

发布评论:
Copyright © 不败君 粤ICP备18102917号-1

不败君

首 页 作 品 微 语