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

两款开箱即用的Live2d

news 2025/8/25 9:21:42

目录

  • 背景
  • 第一款：开箱即用的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

相关文章：

两款开箱即用的Live2d

目录 背景第一款&#xff1a;开箱即用的Live2d在vue项目中使用html页面使用在线预览依赖文件地址配置相关参数成员属性源码 模型下载 第二款&#xff1a;换装模型超多的Live2d在线预览代码示例源码 模型下载 背景 从第一次使用服务器建站已经三年多了&#xff0c;记得那是在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

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

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

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

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

1 控制台输出sql 配置mybatis-plus的日志实现类为StdOutImpl&#xff0c;该实现类中打印日志是通过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设计、数据库设计、接口设计↓编码 //项目代码、单元测试↓ 测试 //测试用例、测试报告↓上线运维 //软件环境安装、配置第一阶段&#xff1a;需求分析需求规格说明书、产品原型一般来说…...

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

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

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

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

递归算法应用（Python版)

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

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

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

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

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

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

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

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

研磨设计模式day11代理模式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

怎么对App进行功能测试

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

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

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

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

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

【洛谷】P2678 跳石头

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

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

Elasticsearch配置优化

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

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

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

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

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

多态/虚函数/虚函数表

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

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

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/7/13 22:34:29

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/6/21 17:11:09

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

编程新知 2025/8/4 2:45:15

（二）TensorRT-LLM | 模型导出（v0.20.0rc3）

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

编程新知 2025/8/22 4:15:24

Leetcode 3577. Count the Number of Computer Unlocking Permutations

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

编程新知 2025/7/29 0:25:39

大语言模型如何处理长文本？常用文本分割技术详解

为什么需要文本分割？ 引言：为什么需要文本分割？一、基础文本分割方法1. 按段落分割（Paragraph Splitting）2. 按句子分割（Sentence Splitting）二、高级文本分割策略3. 重叠分割（Sliding Window）4. 递归分割（Recursive Splitting）三、生产级工具推荐5. 使用LangChain的…...

编程新知 2025/7/8 7:20:37

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

编程新知 2025/8/17 5:52:54

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

编程新知 2025/7/18 2:05:01

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2025/8/20 0:10:35

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2025/8/18 3:52:02