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

两款开箱即用的Live2d

news 2026/1/18 10:11:22

背景

从第一次使用服务器建站已经三年多了，记得那是在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

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度，导致：梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/8/19 23:46:57

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为：煮水 - 冲泡 - 倒入杯中 - 加入辅料利用多态技术实现本案例，提供抽象制作饮品基类，提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2026/1/17 22:31:34

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录第一章概述第二章弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制第三章主要定义 …...

编程新知 2026/1/15 4:24:25

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...

编程新知 2026/1/4 2:33:39

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹，并新增内容 3.创建package文件夹...

编程新知 2026/1/15 6:47:17

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例，也可以通过实例工厂方法获取bean实例。实例工厂方法步骤如下： 定义实例工厂类（Java代码），定义实例工厂（xml），定义调用实例工厂&#xff…...

编程新知 2025/11/25 22:46:30

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本： 3.8.1 语言： JavaScript/TypeScript、C、Java 环境：Window 参考：Java原生反射机制您好，我是鹤九日！ 回顾在上篇文章中：CocosCreator Android项目接入UnityAds 广告SDK。我们简单讲…...

编程新知 2026/1/15 6:50:39

三体问题详解

从物理学角度，三体问题之所以不稳定，是因为三个天体在万有引力作用下相互作用，形成一个非线性耦合系统。我们可以从牛顿经典力学出发，列出具体的运动方程，并说明为何这个系统本质上是混沌的，无法得到一般解…...

编程新知 2025/10/19 5:14:05

一.入门案例启动类： package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

编程新知 2026/1/17 21:56:25

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案，如果正确地操作，重启Eureka集群中的节点，对已经注册的服务影响非常小，甚至可以做到无感知。但如果操作不当，可能会引发短暂的服务发现问题。下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/9/24 3:38:34

目录

背景

第一款：开箱即用的Live2d

在vue项目中使用

html页面使用

在线预览

依赖文件地址配置

相关参数

成员属性

源码 + 模型下载

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

在线预览

代码示例

源码 + 模型下载

相关文章：