两款开箱即用的Live2d

目录

  • 背景
  • 第一款：开箱即用的Live2d
    • 在vue项目中使用
    • html页面使用
    • 在线预览
    • 依赖文件地址配置
    • 相关参数
    • 成员属性
    • 源码 + 模型下载
  • 第二款：换装模型超多的Live2d
    • 在线预览
    • 代码示例
    • 源码 + 模型下载

背景

从第一次使用服务器建站已经三年多了，记得那是在2019年底，2020年初，记得服务器是在2019年的双十一第一次买的阿里云的新人服务器。那时候我刚刚大三上半学期结束，放寒假了在家，开始折腾起来第一次搭建网站。由于之前一直使用的CSDN记录学习笔记，当时想的是搭建一个属于自己的博客网站，自己的“另一个世界”。再后来就是通过探索，折腾起Wordpress，第一个用的博客主题是Kratos。当然在搭建网站的时候很有趣的一点是看到别人的个人网站上都有一个自己网站的小人，原名Live2d，被称为看板娘，所以这篇博客是来分享我最新收集的两款超酷的Live2d和使用经历。

我博客最初的样子：
1692596220769.jpeg

之前也有两次分享过Live2d的使用：
Live2D使用分享：https://qkongtao.cn/?p=312
Live2D——血小板：https://qkongtao.cn/?p=465

第一款：开箱即用的Live2d

作者网站是：https://kuangyx.cn/

你可能注意到网站右下角的Live2d人物了，对此我对Live2d做了类封装几行代码就能实现网站加载Live2d人物。该库包含了live2d与live2d_3的模型。

在vue项目中使用

  1. 安装
npm i @tomiaa/live2d
  1. 在vue文件中引入
<template><div class="hello"><div ref="live2dContentRef" id="live2d"></div></div>
</template><script>
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>
</style>

html页面使用

由于作者提供的是开箱即用的npm资源包@tomiaa/live2d，不便于在其他项目中直接使用，因此我将他重新打包成js和css文件，在html页面中可以直接引入即可。

<link href="http://code.qkongtao.cn/cool-effect/live2d/vue_live2d/static/css/app.css" rel="stylesheet">
<script src="http://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 lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.png"><title>vue_live2d</title><link href="http://code.qkongtao.cn/cool-effect/live2d/vue_live2d/static/css/app.css" rel="stylesheet">
</head><body><noscript><strong>We're sorry but vue_live2d doesn't work properly without JavaScript enabled. Please enable it tocontinue.</strong></noscript><div id="app"></div><script>// 设置参数var Live2d = {showLoading: false,maxWidth: 300,jsBaseURL: "https://live2d.kuangyx.cn/public",}</script><script src="http://code.qkongtao.cn/cool-effect/live2d/vue_live2d/static/js/app.js"></script>
</body></html>

打开效果：
20230821-140259-fb.png

在线预览

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 元素#live2d
jsBaseURL配置依赖的js文件baseURL地址目录stringtomiaa12.github.io/live2d/public
live2d_2_ModelBaseURLlive2d 模型地址目录string默认使用 jsBaseURL
live2d_3_ModelBaseURLlive2d_3 模型地址目录string默认使用 jsBaseURL
loadLive2d_2是否加载 live2d_2 模型列表booleantrue
loadLive2d_3是否加载 live2d_3 模型列表booleantrue
playLoadingAnimation加载模型之后是否播放登场(login)动画，只有存在login动画才有效booleantrue
showLoading显示加载模型 loadingbooleantrue
showControl显示控制栏booleantrue
iApplicationOptionsPIXI.Application 配置IApplicationOptions{}
maxWidth容器最大宽度number400
minWidth容器最小宽度number200
aspectRatio默认宽高比[number,number][10,9]
beforeInit初始化之前(data: {
options:Live2dOptions
modelList: ModelOption[]
})=> void
afterInit初始化完成(data: {
options: Live2dOptions
modelList: ModelOption[]
currentModelOption: ModelOption
Live2DModel: typeof Live2DModelType
app: Application
}) => void
randomPeople人物随机booleantrue
allowDrag允许拖动booleantrue
hitokoto是否开启 hitokoto 一言booleantrue
hitokotoOptions一言配置HitokotoOptions

成员属性

属性名说明类型默认值
options构造器配置Live2dOptions参考上一标题默认值
eldom 容器any
canvascanvas 容器any
Live2DModel模型加载模块typeof Live2DModelType
apppixi.js 应用Application
loading加载loadingbooleanfalse
model当前模型InstanceType<typeof Live2DModelType>
modelList模型列表ModelOption[][]
currentModelOption当前模型配置ModelOption
personIndex模型下标number0
clothingIndex服装下标number0
elLoadingloading dom 元素any
elControlcontrol dom 元素any
elSwitchPerson切换人物 dom 元素any
elSwitchClothing切换服装 dom 元素any
elHitokoto一言 dom 元素any
hitokoto一言Hitokoto

源码 + 模型下载

https://gitee.com/qkongtao/live2d_vue

第二款：换装模型超多的Live2d

在线预览

https://qkongtao.gitee.io/live2d-widget/

20230821-143204-Cs.png

代码示例

<!DOCTYPE html>
<html lang="en"><head><!-- 基础信息 --><meta charset="utf-8"><meta http-equiv="Access-Control-Allow-Origin" content="*"><meta name="renderer" content="webkit" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="force-rendering" content="webkit" /><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="qkongtao.cn"><meta name="keywords" content="qkongtao.cn"><meta name="author" content="qkongtao.cn"><link rel="icon" href="http://qiniu.qkongtao.cn/2021/08/header.png" sizes="192x192" /><title>live2D演示</title>
</head><body><!--FOOTER_CODE_END--><script type="text/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-live2dapi@latest/",// cdnPath: "./live2d_api-1.0.8/",// tools: ["hitokoto", "asteroids", "switch-model", "switch-texture", "photo", "info", "quit"tools: ["hitokoto", "switch-model", "switch-texture", "photo", "quit"]});});}</script></body>
</html>

项目目录结构：
20230821-145120-15.png

自己使用的时候可以根据自己的需求将资源和模型文件放在服务器或者cdn上。

或者新建一个html文件，直接使用上面代码即可。

源码 + 模型下载

https://gitee.com/qkongtao/live2d-widget

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/55279.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【沐风老师】如何在3dMax中将3D物体转化为样条线构成的对象？

【沐风老师】如何在3dMax中将3D物体转化为样条线构成的对象？

在3dMax中如何把三维物体转化为由样条线构成的对象&#xff1f;通常这样的场景会出现在科研绘图或一些艺术创作当中&#xff0c;下面给大家详细讲解一种3dmax三维物体转样条线的方法。 第一部分&#xff1a;用粒子填充3D对象&#xff1a; 1.创建一个三维对象&#xff08;本例…
阅读更多...
动物体外受精手术VR模拟仿真培训系统保证学生及标本的安全

动物体外受精手术VR模拟仿真培训系统保证学生及标本的安全

奶牛是养殖业主要的资源&#xff0c;因此保证奶牛的健康对养殖业的成功和可持续发展具有重要已用&#xff0c;奶牛有一些常见易发病&#xff0c;一旦处理不当&#xff0c;对奶牛业都会造成较大的经济损失&#xff0c;传统的奶牛手术培训实操难度大、风险高且花费大&#xff0c;…
阅读更多...
软件设计师学习笔记6-存储系统

软件设计师学习笔记6-存储系统

目录 1.层次化存储体系 1.1层次化存储结构 1.2层次化存储结构的分类 2.Cache 2.1概念 2.2映像 2.2.1概念 2.2.2分类 2.2.3不同映像的图解(帮助理解&#xff0c;不考) 3.主存编址方法 3.1计算公式 3.2补充内容 1.层次化存储体系 1.1层次化存储结构 局部性原理是层次…
阅读更多...
C++day3（类、this指针、类中的特殊成员函数）

C++day3（类、this指针、类中的特殊成员函数）

一、Xmind整理&#xff1a; 二、上课笔记整理&#xff1a; 1.类的应用实例 #include <iostream> using namespace std;class Person { private:string name; public:int age;int high;void set_name(string n); //在类内声明函数void show(){cout << "na…
阅读更多...
Spring Boot多环境指定yml或者properties

Spring Boot多环境指定yml或者properties

Spring Boot多环境指定yml或者properties 文章目录 Spring Boot多环境指定yml或者properties加载顺序配置指定某个yml 加载顺序 ● application-local.properties ● application.properties ● application-local.yml ● application.yml application.propertes server.port…
阅读更多...
RT1050的ADC

RT1050的ADC

文章目录 1 ADC介绍2 ADC框图2.1 外部输入通道2.2 输入电压范围2.3 触发源2.4 时钟源2.5 偏移矫正功能2.5.1 校准 3 单通道中断采集实验3.1 ADC选项3.2 ADC配置3.3 配置用户通道和中断3.4 中断代码 1 ADC介绍 RT1052 有 2 个 ADC&#xff0c;每个 ADC 有 12 位、10 位、8 位可…
阅读更多...
使用windeployqt和InstallShield打包发布Qt软件的流程

使用windeployqt和InstallShield打包发布Qt软件的流程

前言 Qt编译之后需要打包发布&#xff0c;并且发布给用户后需要增加一个安装软件&#xff0c;通过安装软件可以实现Qt软件的安装&#xff1b;用于安装软件的软件有很多&#xff0c;这里主要介绍InstallShield使用的流程&#xff1b; 使用windeployqt打包Qt编译后的程序 Qt程序…
阅读更多...
【JavaEE】Spring事务-事务的基本介绍-事务的实现-@Transactional基本介绍和使用

【JavaEE】Spring事务-事务的基本介绍-事务的实现-@Transactional基本介绍和使用

【JavaEE】Spring事务&#xff08;1&#xff09; 文章目录 【JavaEE】Spring事务&#xff08;2&#xff09;1. 为什么要使用事务2. Spring中事务的实现2.1 事务针对哪些操作2.2 MySQL 事务使用2.3 Spring 编程式事务&#xff08;手动挡&#xff09;2.4 Spring 声明式事务&#…
阅读更多...
【线程池】ThreadPoolExecutor的使用示例

【线程池】ThreadPoolExecutor的使用示例

文章目录 通过ThreadPoolExecutor创建线程池。线程的处理结果如何获取&#xff1f; 通过ThreadPoolExecutor创建线程池。 ThreadPoolExecutor构造方法参数&#xff1a; int corePoolSize //核心线程数量int maximumPoolSize//最大线程数long keepAliveTime//当线程数大于核心…
阅读更多...
【无线点对点网络时延分析和可视化】模拟无线点对点网络中的延迟以及物理层和数据链路层之间的相互作用（Matlab代码实现）

【无线点对点网络时延分析和可视化】模拟无线点对点网络中的延迟以及物理层和数据链路层之间的相互作用（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
Win解答 | 解决键盘中 字母+空格 导致的输入法弹窗导致的一系列问题

Win解答 | 解决键盘中 字母+空格 导致的输入法弹窗导致的一系列问题

近三个月来&#xff0c;一直都有一个键盘组合键的问题影响我的电脑使用&#xff0c;不管是打字还是打游戏&#xff0c;都会出现按键盘的 字母空格 弹出一个特殊符号的候选框&#xff0c;如下图所示 图片中为 S空格 所出现的弹窗 一个看似方便&#xff0c;实则难受的功能 其实打…
阅读更多...
SpringBoot入门篇2 - 配置文件格式、多环境开发、配置文件分类

SpringBoot入门篇2 - 配置文件格式、多环境开发、配置文件分类

目录 1.配置文件格式&#xff08;3种&#xff09; 例&#xff1a;修改服务器端口。&#xff08;3种&#xff09; src/main/resources/application.properties server.port80 src/main/resources/application.yml&#xff08;主要用这种&#xff09; server:port: 80 src/m…
阅读更多...
[Go版]算法通关村第十四关白银——堆高效解决的经典问题（在数组找第K大的元素、堆排序、合并K个排序链表）

[Go版]算法通关村第十四关白银——堆高效解决的经典问题（在数组找第K大的元素、堆排序、合并K个排序链表）

目录 题目&#xff1a;在数组中找第K大的元素解法1&#xff1a;维护长度为k的最小堆&#xff0c;遍历n-k个元素&#xff0c;逐一和堆顶值对比后&#xff0c;和堆顶交换&#xff0c;最后返回堆顶复杂度&#xff1a;时间复杂度 O ( k ( n − k ) l o g k ) O(k(n-k)logk) O(k(n−…
阅读更多...
CSS实现内凹圆角，从而实现圆角边框

CSS实现内凹圆角，从而实现圆角边框

1、代码 <!DOCTYPE html> <html><head><style>.uu {position: relative;width: 400px;height: 300px;}img {width: 100%;height: 100%;z-index: 1;}.box_right_top {background-image: radial-gradient(circle at left bottom, transparent 50px, whi…
阅读更多...
统信OS国产操作系统身份证读卡器社保卡读卡web网页开发使用操作流程

统信OS国产操作系统身份证读卡器社保卡读卡web网页开发使用操作流程

用于DONSEE系列身份证阅读器谷歌Chrome火狐Firefox插件&#xff0c;支持的型号有&#xff1a;EST-100、EST-100GS、EST-100G、EST-100U、EST-200G、EST-J13X等。 本方案无缝支持最新版本谷歌Chrome火狐Firefox等网页浏览器&#xff0c;支持H5、Vue、React、Node.js、Electron、…
阅读更多...
设计模式--单例模式（Singleton Pattern）

设计模式--单例模式（Singleton Pattern）

一、什么是单例模式 单例模式是一种创建型设计模式&#xff0c;它旨在确保一个类只有一个实例&#xff0c;并提供一个全局访问点来访问该实例。换句话说&#xff0c;单例模式限制了类的实例化次数为一个&#xff0c;并提供一种在应用程序中共享一个实例的方式。这对于需要只有…
阅读更多...
Linux系统编程：线程控制

Linux系统编程：线程控制

目录 一. 线程的创建 1.1 pthread_create函数 1.2 线程id的本质 二. 多线程中的异常和程序替换 2.1 多线程程序异常 2.2 多线程中的程序替换 三. 线程等待 四. 线程的终止和分离 4.1 线程函数return 4.2 线程取消 pthread_cancel 4.3 线程退出 pthread_exit 4.4 线程…
阅读更多...
Day44|leetcode 518.零钱兑换II、377. 组合总和 Ⅳ

Day44|leetcode 518.零钱兑换II、377. 组合总和 Ⅳ

完全背包理论基础 视频链接&#xff1a;带你学透完全背包问题&#xff01; 和 01背包有什么差别&#xff1f;遍历顺序上有什么讲究&#xff1f;_哔哩哔哩_bilibili 完全背包与01背包不同的地方就是&#xff1a;01背包每种物品只能取一次&#xff0c;而完全背包每种物品可以取…
阅读更多...
2023年国赛数学建模思路 - 案例：粒子群算法

2023年国赛数学建模思路 - 案例：粒子群算法

文章目录 1 什么是粒子群算法&#xff1f;2 举个例子3 还是一个例子算法流程算法实现建模资料 # 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 1 什么是粒子群算法&#xff1f; 粒子群算法&#xff08;Pa…
阅读更多...
yolov5中添加ShuffleAttention注意力机制

yolov5中添加ShuffleAttention注意力机制

ShuffleAttention注意力机制简介 关于ShuffleAttention注意力机制的原理这里不再详细解释.论文参考如下链接here   yolov5中添加注意力机制 注意力机制分为接收通道数和不接受通道数两种。这次属于接受通道数注意力机制，这种注意力机制由于有通道数要求，所示我们添加的时候…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023