网站建设方案确认表,php网站培训,网站内的搜索是怎么做的,域名备案网站建设书模板目录 背景第一款#xff1a;开箱即用的Live2d在vue项目中使用html页面使用在线预览依赖文件地址配置相关参数成员属性源码 模型下载 第二款#xff1a;换装模型超多的Live2d在线预览代码示例源码 模型下载 背景 从第一次使用服务器建站已经三年多了#xff0c;记得那是在2… 目录 背景第一款开箱即用的Live2d在vue项目中使用html页面使用在线预览依赖文件地址配置相关参数成员属性源码 模型下载 第二款换装模型超多的Live2d在线预览代码示例源码 模型下载 背景 从第一次使用服务器建站已经三年多了记得那是在2019年底2020年初记得服务器是在2019年的双十一第一次买的阿里云的新人服务器。那时候我刚刚大三上半学期结束放寒假了在家开始折腾起来第一次搭建网站。由于之前一直使用的CSDN记录学习笔记当时想的是搭建一个属于自己的博客网站自己的“另一个世界”。再后来就是通过探索折腾起Wordpress第一个用的博客主题是Kratos。当然在搭建网站的时候很有趣的一点是看到别人的个人网站上都有一个自己网站的小人原名Live2d被称为看板娘所以这篇博客是来分享我最新收集的两款超酷的Live2d和使用经历。 我博客最初的样子
之前也有两次分享过Live2d的使用 Live2D使用分享https://qkongtao.cn/?p312 Live2D——血小板https://qkongtao.cn/?p465
第一款开箱即用的Live2d
作者网站是https://kuangyx.cn/ 你可能注意到网站右下角的Live2d人物了对此我对Live2d做了类封装几行代码就能实现网站加载Live2d人物。该库包含了live2d与live2d_3的模型。 在vue项目中使用
安装
npm i tomiaa/live2d在vue文件中引入
templatediv classhellodiv reflive2dContentRef idlive2d/div/div
/templatescript
import { Live2d } from tomiaa/live2d;
export default {name: Live2d,mounted() {new Live2d({el: document.getElementById(live2d),showLoading: false,maxWidth: 300,jsBaseURL: https://live2d.kuangyx.cn/public,});},
};
/script
style scoped
/stylehtml页面使用
由于作者提供的是开箱即用的npm资源包tomiaa/live2d不便于在其他项目中直接使用因此我将他重新打包成js和css文件在html页面中可以直接引入即可。
link hrefhttp://code.qkongtao.cn/cool-effect/live2d/vue_live2d/static/css/app.css relstylesheet
script srchttp://code.qkongtao.cn/cool-effect/live2d/vue_live2d/static/js/app.js/script两个资源文件下载https://gitee.com/qkongtao/live2d_vue/tree/master/vue_live2d/dist/static
使用示例
!DOCTYPE html
html langheadmeta charsetutf-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width,initial-scale1link relicon hreffavicon.pngtitlevue_live2d/titlelink hrefhttp://code.qkongtao.cn/cool-effect/live2d/vue_live2d/static/css/app.css relstylesheet
/headbodynoscriptstrongWere sorry but vue_live2d doesnt work properly without JavaScript enabled. Please enable it tocontinue./strong/noscriptdiv idapp/divscript// 设置参数var Live2d {showLoading: false,maxWidth: 300,jsBaseURL: https://live2d.kuangyx.cn/public,}/scriptscript srchttp://code.qkongtao.cn/cool-effect/live2d/vue_live2d/static/js/app.js/script
/body/html打开效果
在线预览
http://code.qkongtao.cn/cool-effect/live2d/vue_live2d/
依赖文件地址配置
依赖文件的地址文件IP都在github下面参数主要考虑到国内经常被墙可以使用下面参数使用其他服务器地址。
jsBaseURL配置依赖的js文件baseURL地址目录默认加载的https://github.com/tomiaa12/live2d/tree/main/public下的js文件修改后需要保证该目录下也应该存在同样的文件。live2d_2_ModelBaseURL: live2d模型的baseURL地址目录默认使用jsBaseURL参数。live2d_3_ModelBaseURL: live2d_3模型的baseURL地址目录默认使用jsBaseURL参数。
相关参数
属性说明类型默认值el容器 querySelector 选择器或 domstring | DOM 元素#live2djsBaseURL配置依赖的js文件baseURL地址目录stringtomiaa12.github.io/live2d/publiclive2d_2_ModelBaseURLlive2d 模型地址目录string默认使用 jsBaseURLlive2d_3_ModelBaseURLlive2d_3 模型地址目录string默认使用 jsBaseURLloadLive2d_2是否加载 live2d_2 模型列表booleantrueloadLive2d_3是否加载 live2d_3 模型列表booleantrueplayLoadingAnimation加载模型之后是否播放登场(login)动画只有存在login动画才有效booleantrueshowLoading显示加载模型 loadingbooleantrueshowControl显示控制栏booleantrueiApplicationOptionsPIXI.Application 配置IApplicationOptions{}maxWidth容器最大宽度number400minWidth容器最小宽度number200aspectRatio默认宽高比[number,number][10,9]beforeInit初始化之前(data: {options:Live2dOptionsmodelList: ModelOption[]}) voidafterInit初始化完成(data: {options: Live2dOptionsmodelList: ModelOption[]currentModelOption: ModelOptionLive2DModel: typeof Live2DModelTypeapp: Application}) voidrandomPeople人物随机booleantrueallowDrag允许拖动booleantruehitokoto是否开启 hitokoto 一言booleantruehitokotoOptions一言配置HitokotoOptions
成员属性
属性名说明类型默认值options构造器配置Live2dOptions参考上一标题默认值eldom 容器anycanvascanvas 容器anyLive2DModel模型加载模块typeof Live2DModelTypeapppixi.js 应用Applicationloading加载loadingbooleanfalsemodel当前模型InstanceTypetypeof Live2DModelTypemodelList模型列表ModelOption[][]currentModelOption当前模型配置ModelOptionpersonIndex模型下标number0clothingIndex服装下标number0elLoadingloading dom 元素anyelControlcontrol dom 元素anyelSwitchPerson切换人物 dom 元素anyelSwitchClothing切换服装 dom 元素anyelHitokoto一言 dom 元素anyhitokoto一言Hitokoto
源码 模型下载
https://gitee.com/qkongtao/live2d_vue
第二款换装模型超多的Live2d
在线预览
https://qkongtao.gitee.io/live2d-widget/ 代码示例
!DOCTYPE html
html langenhead!-- 基础信息 --meta charsetutf-8meta http-equivAccess-Control-Allow-Origin content*meta namerenderer contentwebkit /meta http-equivX-UA-Compatible contentIEedge,chrome1 /meta nameforce-rendering contentwebkit /meta nameviewport contentwidthdevice-width, initial-scale1meta namedescription contentqkongtao.cnmeta namekeywords contentqkongtao.cnmeta nameauthor contentqkongtao.cnlink relicon hrefhttp://qiniu.qkongtao.cn/2021/08/header.png sizes192x192 /titlelive2D演示/title
/headbody!--FOOTER_CODE_END--script typetext/javascript// live2d_path 参数建议使用绝对路径// const live2d_path ./live2d-widget/;const live2d_path https://code.haiyong.site/live2d-widget/;// 封装异步加载资源的方法function loadExternalResource(url, type) {return new Promise((resolve, reject) {let tag;if (type css) {tag document.createElement(link);tag.rel stylesheet;tag.href url;} else if (type js) {tag document.createElement(script);tag.src url;}if (tag) {tag.onload () resolve(url);tag.onerror () reject(url);document.head.appendChild(tag);}});}// 加载 waifu.css live2d.min.js waifu-tips.jsif (screen.width 768) {Promise.all([loadExternalResource(live2d_path waifu.css, css),loadExternalResource(live2d_path live2d.min.js, js),loadExternalResource(live2d_path waifu-tips.js, js)]).then(() {// 配置选项的具体用法见 README.mdinitWidget({waifuPath: live2d_path waifu-tips.json,cdnPath: https://npm.elemecdn.com/akilar-live2dapilatest/,// cdnPath: ./live2d_api-1.0.8/,// tools: [hitokoto, asteroids, switch-model, switch-texture, photo, info, quittools: [hitokoto, switch-model, switch-texture, photo, quit]});});}/script/body
/html项目目录结构
自己使用的时候可以根据自己的需求将资源和模型文件放在服务器或者cdn上。
或者新建一个html文件直接使用上面代码即可。
源码 模型下载
https://gitee.com/qkongtao/live2d-widget
