当前位置：首页 > news >正文

两款开箱即用的Live2d

news 文章来源：https://blog.csdn.net/qq_42038623/article/details/132409898 2025/4/21 12:01:08

背景

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

我博客最初的样子：

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

第一款：开箱即用的Live2d

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

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

在vue项目中使用

安装

npm i @tomiaa/live2d

在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>

打开效果：

在线预览

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 选择器或 dom	string \| DOM 元素	#live2d
jsBaseURL	配置依赖的`js`文件`baseURL`地址目录	string	`tomiaa12.github.io/live2d/public`
live2d_2_ModelBaseURL	live2d 模型地址目录	string	默认使用 jsBaseURL
live2d_3_ModelBaseURL	live2d_3 模型地址目录	string	默认使用 jsBaseURL
loadLive2d_2	是否加载 live2d_2 模型列表	boolean	true
loadLive2d_3	是否加载 live2d_3 模型列表	boolean	true
playLoadingAnimation	加载模型之后是否播放登场(login)动画，只有存在`login`动画才有效	boolean	true
showLoading	显示加载模型 loading	boolean	true
showControl	显示控制栏	boolean	true
iApplicationOptions	PIXI.Application 配置	IApplicationOptions	{}
maxWidth	容器最大宽度	number	400
minWidth	容器最小宽度	number	200
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	人物随机	boolean	true
allowDrag	允许拖动	boolean	true
hitokoto	是否开启 hitokoto 一言	boolean	true
hitokotoOptions	一言配置	HitokotoOptions

成员属性

属性名	说明	类型	默认值
options	构造器配置	Live2dOptions	参考上一标题默认值
el	dom 容器	any
canvas	canvas 容器	any
Live2DModel	模型加载模块	typeof Live2DModelType
app	pixi.js 应用	Application
loading	加载loading	boolean	false
model	当前模型	InstanceType<typeof Live2DModelType>
modelList	模型列表	ModelOption[]	[]
currentModelOption	当前模型配置	ModelOption
personIndex	模型下标	number	0
clothingIndex	服装下标	number	0
elLoading	loading dom 元素	any
elControl	control 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/

代码示例

<!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>

项目目录结构：

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

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

源码 + 模型下载

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

两款开箱即用的Live2d

目录背景第一款：开箱即用的Live2d在vue项目中使用html页面使用在线预览依赖文件地址配置相关参数成员属性源码模型下载第二款：换装模型超多的Live2d在线预览代码示例源码模型下载背景从第一次使用服务器建站已经三年多了，记得那是在2…...

编程日记 2023/8/28 0:23:38

LAMP架构详解+构建LAMP平台之Discuz论坛

LAMP架构详解构建LAMP平台之Discuz论坛 1、LAPM架构简介1.1动态资源与语言1.2LAPM架构得组成1.3LAPM架构说明1.4CGI和astcgi1.4.1CGI1.4.2fastcgi1.4.3CGI和fastcgi比较 2、搭建LAMP平台2.1编译安装apache httpd2.2编译安装mysql2.3编译安装php2.4安装论坛 1、LAPM架构简介 1.…...

编程日记 2023/8/28 0:22:37

如何使用腾讯云服务器搭建网站?新手建站教程

使用腾讯云服务器搭建网站全流程，包括轻量应用服务器和云服务器CVM建站教程，轻量可以使用应用镜像一键建站，云服务器CVM可以通过安装宝塔面板的方式来搭建网站，腾讯云服务器网分享使用腾讯云服务器建站教程，新手站长搭…...

编程日记 2023/8/28 0:21:35

mybatis plus 控制台和日志文件中打印sql配置

1 控制台输出sql 配置mybatis-plus的日志实现类为StdOutImpl，该实现类中打印日志是通过System.out.println(s)的方式来打印日志的 mybatis-plus:configuration:log-impl: org.apache.imbatis.logging.stdout.StdOutImpl2 日志文件中写入sql 日志文件中输入sql需要…...

编程日记 2023/8/28 0:20:34

苍穹外卖总结

前言 1、软件开发流程瀑布模型需求分析//需求规格说明书、产品原型↓ 设计 //UI设计、数据库设计、接口设计↓编码 //项目代码、单元测试↓ 测试 //测试用例、测试报告↓上线运维 //软件环境安装、配置第一阶段：需求分析需求规格说明书、产品原型一般来说…...

编程日记 2023/8/28 0:19:34

Git 删除已经合并的本地分支

在使用 Git 的开发流程中，经常会创建很多的 Git 分支，包括功能分支（features/*）、发布分支（release/*）和 hotfix 分支（hotfix/*）。在开发了一段时间之后，本地就会有出现很…...

编程日记 2023/8/28 0:18:32

递归算法应用（Python版)

文章目录递归递归定义递归调用的实现递归应用数列求和任意进制转换汉诺塔探索迷宫找零兑换-递归找零兑换-动态规划递归可视化简单螺旋图分形树：自相似递归图像谢尔宾斯基三角分治策略优化问题和贪心策略递归递归定义递归是一种解决问题的方法，其精…...

编程日记 2023/8/28 0:17:31

有什么react进阶的项目推荐的？

前言整理了一些react相关的项目，可以选择自己需要的练习，希望对你有帮助~ 1.ant-design Star：87.1k 阿里开源的react项目，作为一个UI库，省去重复造轮子的时间仓库地址：https://github.com/ant-design/…...

编程日记 2023/8/28 0:16:30

基于串口透传模块，单片机无线串口空中下载测试

基于串口透传模块，单片机无线串口空中下载测试 ✨无线串口下载，其本质还是串口下载方式，只不过省去了单片机和ISP上位机工具之间的物理有线连接，中间的数据通过无线串口透传模块进行数据中转，传递到单片机串口上。串口…...

编程日记 2023/8/28 0:15:29

研磨设计模式day11代理模式

目录场景代码实现编辑解析定义代理模式调用示意图代理模式的特点本质编辑何时选用场景我有一个订单类，包含订单数、用户名和商品名，有一个订单接口包含了对订单类的getter和setter 现在有一个需求，a创建的订单只…...

编程日记 2023/8/28 0:14:28

vue2 路由进阶,VueCli 自定义创建项目

一、声明式导航-导航链接 1.需求实现导航高亮效果如果使用a标签进行跳转的话，需要给当前跳转的导航加样式，同时要移除上一个a标签的样式，太麻烦！！！ 2.解决方案 vue-router 提供了一个全局组件 router…...

编程日记 2023/8/28 0:13:26

《C语言编程环境搭建》工欲善其事必先利其器

C语言编译器 GCC 系列 GNU编译器套装(英语：GNU Compiler Collection，缩写为GCC)，指一套编程语言编译器，常被认为是跨平台编译器的事实标准。原名是：GNU C语言编译器(GNU C Compiler)。 MinGW 又称mingw32 &#xff0c…...

编程日记 2023/8/28 0:12:24

蓝蓝设计ui设计公司作品案例-中节能现金流抗压测试软件交互及界面设计

中国节能是以节能环保为主业的中央企业。中国节能以生态文明建设为己任，长期致力于让天更蓝、山更绿、水更清，让生活更美好。经过多年发展，中国节能已构建起以节能、环保、清洁能源、健康和节能环保综合服务为主业的41产业格局，成…...

编程日记 2023/8/28 0:11:23

汽车制造业外发文件时如何阻断泄密风险？

汽车制造业是我国国民经济发展的支柱产业之一，具有产业链长、关联度高、就业面广、消费拉动大等特性。汽车制造行业景气度与宏观经济、居民收入水平和固定资产投资密切相关。汽车制造业产业链长，关联度高，汽车制造上游行业主要为钢铁、化工…...

编程日记 2023/8/28 0:10:22

怎么对App进行功能测试

测试人员常被看作是bug的寻找者，但你曾想过他们实际是如何开展测试的吗？你是否好奇他们究竟都做些什么，以及他们如何在一个典型的技术项目中体现价值？本文将带你经历测试人员的思维过程，探讨他们测试app时的各种考虑. …...

编程日记 2023/8/28 0:09:21

数字流的秩、单词频率（哈希实现）

题目1：数字流的秩假设你正在读取一串整数。每隔一段时间，你希望能找出数字 x 的秩(小于或等于 x 的值的个数)。请实现数据结构和算法来支持这些操作，也就是说： 实现 track(int x) 方法，每读入一个数字都会调用该方法…...

编程日记 2023/8/28 0:08:19

【洛谷】P2678 跳石头

原题链接：https://www.luogu.com.cn/problem/P2678 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析二分答案。（使用二分需要满足两个条件。一个是有界，一个是单调。这题的题面：使得选手们在比赛过程中…...

编程日记 2023/8/28 0:07:18

Elasticsearch配置优化

以下的优化基础是安装的 Elasticsearch 版本为 7.17.7，同时jdk版本为 1.8.321 1、jvm参数优化这里说的jvm参数调优，是指elasticsearch安装目录下的jvm.options配置，如下图所示： 这里调整的内容主要是调整垃圾回收的收集器&#…...

编程日记 2023/8/28 0:06:16

Springboot整合minio组件-分布式文件存储

一、快速开始 Minlo说明： Minio是Apcche旗下的一款开源的轻量级文件服务器，基于对象存储，协议是基于Apache License v2.0，开源可用于商务。Minio主要用来存储非结构化的数据，类似文件，图片，照…...

编程日记 2023/8/28 0:05:15

多态/虚函数/虚函数表

OVERVIEW 多态/虚函数/虚函数表1.虚函数引入后类发生的变化？2.虚函数表的生成时机和生成原因？3.虚函数表指针赋值的时机？4.类对象在内存中的布局？5.虚函数的工作原理和多态性的体现？6.其他问题多态/虚函数/虚函数表 n…...

编程日记 2023/8/28 0:04:14

QT中按钮的基类QAbstractButton

QT中按钮的基类QAbstractButton 关于控件类的学习方法继承关系信号槽函数标题和图标按钮的 Check 属性关于控件类的学习方法控件类很多，API更多，但是不需要记忆知道控件对应的类名，通过帮助文档随用随查优先看帮助文档中控件对应的信号和槽…...

编程日记 2023/8/28 0:03:13

并查集（种类并查集，带权并查集）

链接：登录—专业IT笔试面试备考平台_牛客网来源：牛客网题目描述动物王国中有三类动物A,B,C，这三类动物的食物链构成了有趣的环形。A吃B，B吃C，C吃A。现有N个动物，以1－N编号。每个动物都…...

编程日记 2023/8/28 0:02:12

飞天使-k8s基础组件分析-控制器

文章目录控制器含义解释pod的标签与注释ReplicaControllerReplicaSetDeploymentsDaemonSetJobCronjob参考文档控制器含义解释空调遥控器知道吧ReplicationController: ReplicationController确保在任何时候都运行指定数量的pod副本。换句话说，一个ReplicationCo…...

编程日记 2023/8/28 0:01:11

有序充电运营管理平台是基于物联网和大数据技术的充电设施管理系统-安科瑞黄安南

随着我国能源战略发展以及低碳行动的实施，电动汽车已逐步广泛应用，而电动汽车的应用非常符合当今社会对环保意识的要求，以及有效节省化石燃料的消耗。由于其没有污染排放的优点以及政府部门的关注，电动汽车将成为以后出行的重要…...

编程日记 2023/8/28 0:00:07

LeetCode-227-基本计算器Ⅱ

题目描述： 给你一个字符串表达式 s ，请你实现一个基本计算器来计算并返回它的值。整数除法仅保留整数部分。你可以假设给定的表达式总是有效的。所有中间结果将在 [-231, 231 - 1] 的范围内。注意：不允许使用任何将字符串作为数学表达式计…...

编程日记 2023/8/27 23:59:05

dart 学习列表 List

List 列表在 Dart 编程语言中，List 是一种有序的集合数据类型，用于存储一系列项目。它允许您在单个变量中存储多个项目，并提供了许多操作来管理列表中的数据。以下是关于 Dart 中的 List 的一些重要信息： 创建 List： …...

编程日记 2023/8/27 23:58:04

数据结构--树4.2.1（二叉树）

目录一、二叉树的存储结构二、二叉树的遍历一、二叉树的存储结构顺序存储结构：二叉树的顺序存储结构就是用一维数组存储二叉树中的各个结点，并且结点的存储位置能体现结点之间的逻辑关系。链式存储结构：二叉树每个结点最多只有两个孩…...

编程日记 2023/8/27 23:57:03

Presto之Driver个数

一. 前言在Presto的Stage Performace中，每个Operator中都会有Driver个数的显示，如下图所示。本文主要介绍Presto中是如何决定Driver的个数的。二. Driver个数在Presto中，一个pipeline中启动多少个Driver，是由此Pipeline处理的S…...

编程日记 2023/8/27 23:56:01

R语言响应面（RSM）、线性模型lm分析生产过程影响因素可视化

全文链接：https://tecdat.cn/?p33499 响应面（Response Surface Methodology，RSM）分析是一种常用的统计方法，用于研究和优化生产过程中的影响因素。通过建立数学模型来描述因素与响应之间的关系，RSM可以帮助…...

编程日记 2023/8/27 23:55:00

剑指Offer --- 字符串篇

剑指Offer — 字符串篇 — 剑指的题解K神已经写的已经非常详细了，并且Github上开源的电子书目前热度也非常高，这个12天12个模块系列就当作自己的秋招刷题汇总了，欢迎大家交流。剑指 Offer 05. 替换空格思路 **(线性扫描) ** O(n) 这个…...

编程日记 2023/8/27 23:53:59

目录

背景

第一款：开箱即用的Live2d

在vue项目中使用

html页面使用

在线预览

依赖文件地址配置

相关参数

成员属性

源码 + 模型下载

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

在线预览

代码示例

源码 + 模型下载

相关文章：