血小板 live2d web使用
Web 使用
2023-09-11 14:17:27 时间
关于此插件
看到一个很多网站都有动态的小人,目前除了即将废弃的flash就是canvas和h5动画了,h5动画能力有限,不能画出复杂的效果
那么canvas就是首选,全部手画也不可能,大部分使用库和工具
这里看到到家都是用的link2d的引擎库,很多人用起来都需要大量的配置,因此想封装一下
本插件是基于linkLive2d二次封装的,因为原版插件需要配置的地方太多。使用本插件,直接引入页面,初始化两个参数即可
官方api参考这里
基于v1.0的版本开发
需要注意v1和v3差别很大,素材不可通用
使用说明
增加模型
项目内已经预置很多人物模型,可以选择使用。只需要更改index.html 的modelType值即可,预选值为live2Model下文件夹名字
如果不满意,或者有更好的人物,放入本项目,也可以使用
需要准守一下规范:
- 新建文件夹,以模型的名字命名,放入本库live2dModel目录下
- 配置文件规定命名为model.json,这个必须要有
- 基础动画脚本文件规定命名为model.moc,这个必须有
- 贴图文件必须命名为texture.png,这个也是必须要有的
- 动作事件文件存在方在live2dModel>motions目录内,可无
人物大小调整
在根目录的index.js文件中,修改字符串模板中的canvas的宽高即可,我是写死的,没有提供配置入口
在web页面中使用
注意,本地项目启动时,请求json可能会导致跨域,可以自行解决,也可以安装node的包http-server,然后用一下命令启动。即可解决
http-server --cors
在页面中如下引入即可
<!-- 依赖jquery -->
<script src="jquery.min.js"></script>
<script src="useLive2d/index.js"></script>
<script>
useLive2dInit({
path:'/useLive2d', //类库的位置
//模特类型,即所在live2Model下文件夹名:这里是血小板
modelType:'xxban'
})
</script>
项目库地址
相关文章
- 【J2EE十三个规范】Web应用层之JSP和Servlet
- nodePPT使用笔记(又一款好用的Web PPT)
- Web安全 --Wfuzz 使用大全
- 【CTF WEB】ISCC 2016 web 2题记录
- OSGI开发web应用
- Asp.Net Web API 2第十一课——在Web API中使用Dependency Resolver
- web安全
- [Web] Use Web Speech API to make the browser speak out loud using SpeechSynthesis
- 构建Apache Web服务器
- IDEA 如何使用JRebel 部署web项目呢?
- loadrunner12.55:常用函数汇总说明之Web Vuser Functions(WEB)参数函数
- 如何使用SAP UI5 web Component的React框架的柱状图和折线图
- SAP UI5 Web Component里如何自定义CSS style
- ABAP web service schema node的处理
- 使用C4C的web service创建Service Request
- Atitit。Web server Jetty9 使用 attilax 总结
- 【2】按照Django官网,创建一个web app 创建app/创建相应的数据库表
- JumpServer新增加windows终端web终端连接出现用户名或密码认证错误登录失败,账户密码确认是正确无误
- Web.xml 中增加log4j
- Java Web系统经常使用的第三方接口
- go语言web开发系列之六:gin使用zap记录http服务的访问日志(access log)并按日期分割
- Centos8之Cockpit Web控制台安装与使用
- ASP.NET(Web网站开发),简单邮件发送的制作