【小工具】pixi-live2d-display,直接可用的live2d的交互网页/桌面应用

效果:
在这里插入图片描述

<script src="https://cubism.live2d.com/sdk-web/cubismcore/live2dcubismcore.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/dylanNew/live2d/webgl/Live2D/lib/live2d.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi.js@6.5.2/dist/browser/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-live2d-display/dist/extra.min.js"></script><canvas id=canvas></canvas><div id="control"></div><script type="text/javascript">const cubism2Model ="https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/shizuku/shizuku.model.json";
const cubism4Model ="https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/haru/haru_greeter_t03.model3.json";const live2d = PIXI.live2d;(async function main() {const app = new PIXI.Application({view: document.getElementById("canvas"),autoStart: true,resizeTo: window,backgroundColor: 0x333333});const models = await Promise.all([live2d.Live2DModel.from(cubism2Model),live2d.Live2DModel.from(cubism4Model)]);models.forEach((model) => {app.stage.addChild(model);const scaleX = (innerWidth * 0.4) / model.width;const scaleY = (innerHeight * 0.8) / model.height;// fit the windowmodel.scale.set(Math.min(scaleX, scaleY));model.y = innerHeight * 0.1;draggable(model);addFrame(model);addHitAreaFrames(model);});const model2 = models[0];const model4 = models[1];model2.x = (innerWidth - model2.width - model4.width) / 2;model4.x = model2.x + model2.width;// handle tappingmodel2.on("hit", (hitAreas) => {if (hitAreas.includes("body")) {model2.motion("tap_body");}if (hitAreas.includes("head")) {model2.expression();}});model4.on("hit", (hitAreas) => {if (hitAreas.includes("Body")) {model4.motion("Tap");}if (hitAreas.includes("Head")) {model4.expression();}});
})();function draggable(model) {model.buttonMode = true;model.on("pointerdown", (e) => {model.dragging = true;model._pointerX = e.data.global.x - model.x;model._pointerY = e.data.global.y - model.y;});model.on("pointermove", (e) => {if (model.dragging) {model.position.x = e.data.global.x - model._pointerX;model.position.y = e.data.global.y - model._pointerY;}});model.on("pointerupoutside", () => (model.dragging = false));model.on("pointerup", () => (model.dragging = false));
}function addFrame(model) {const foreground = PIXI.Sprite.from(PIXI.Texture.WHITE);foreground.width = model.internalModel.width;foreground.height = model.internalModel.height;foreground.alpha = 0.2;model.addChild(foreground);checkbox("Model Frames", (checked) => (foreground.visible = checked));
}function addHitAreaFrames(model) {const hitAreaFrames = new live2d.HitAreaFrames();hitAreaFrames.visible = true;model.addChild(hitAreaFrames);//checkbox("Hit Area Frames", (checked) => (hitAreaFrames.visible = checked));
}function checkbox(name, onChange) {const id = name.replace(/\W/g, "").toLowerCase();let checkbox = document.getElementById(id);if (!checkbox) {const p = document.createElement("p");p.innerHTML = `<input type="checkbox" id="${id}"> <label for="${id}">${name}</label>`;document.getElementById("control").appendChild(p);checkbox = p.firstChild;}checkbox.addEventListener("change", () => {onChange(checkbox.checked);});onChange(checkbox.checked);
}</script><style>
#controlposition: absolutetop: 8pxleft: 24pxcolor: whitefont-size: 18px
</style>

熟悉了上面这种纯js实现之后,可以融入到electron中,实现桌面宠物,效果图:
在这里插入图片描述
还有更多交互相关的请参考
开源项目pixi-live2d-display:https://github.com/guansss/pixi-live2d-display
中文文档:https://github.com/guansss/pixi-live2d-display/blob/master/README.zh.md
API手册:https://guansss.github.io/pixi-live2d-display/api/index.html

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

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

相关文章

vue element plus Typography 排版

我们对字体进行统一规范&#xff0c;力求在各个操作系统下都有最佳展示效果。 字体# 字号# LevelFont SizeDemoSupplementary text12px Extra SmallBuild with ElementBody (small)13px SmallBuild with ElementBody14px BaseBuild with ElementSmall Title16px MediumBuild w…

java SSM问卷调查系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM问卷调查管理系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代 码和数据库&#xff0c;系统主要采…

Eureka切换Nacos时发现两个注册中心的解决方法

报错信息如下&#xff0c;意思是发现了两个注册中心 Field autoServiceRegistration in org.springframework.cloud.client.serviceregistry.AutoServiceRegistrationAutoConfiguration required a single bean, but 2 were found: - nacosAutoServiceRegistration: defined…

系统性介绍MoE模型架构,以及在如今大模型方向的发展现状

知乎&#xff1a;Verlocksss编辑&#xff1a;马景锐链接&#xff1a;https://zhuanlan.zhihu.com/p/675216281 1 学习动机 第一次了解到MoE&#xff08;Mixture of experts&#xff09;&#xff0c;是在GPT-4模型架构泄漏事件&#xff0c;听说GPT-4的架构是8个GPT-3级别大小的模…

<HarmonyOS第一课>1~10课后习题汇总

HarmonyOS第一课 &#xff1c;HarmonyOS主题课&#xff1e;1~3课后习题汇总 1运行Hello World 判断题 main_pages.json存放页面page路径配置信息。&#xff08;正确&#xff09;DevEco Studio是开发HarmonyOS应用的一站式集成开发环境。&#xff08;正确&#xff09; 单选题…

python_selenium_安装基础学习

目录 1.为什么使用selenium 2.安装selenium 2.1Chrome浏览器 2.2驱动 2.3下载selenium 2.4测试连接 3.selenium元素定位 3.1根据id来找到对象 3.2根据标签属性的属性值来获取对象 3.3根据xpath语句来获取对象 3.4根据标签的名字获取对象 3.5使用bs4的语法来获取对象…

Xmind - win10安装破解Xmind2023

Xmind - win10安装破解Xmind2023 1、下载 Xmind下载 提取码:we6i 2、安装 Step 1:双击运行 exe文件 Step 2:忽略最新版本 最近更新选择继续升级至Pro选择取消Step 4:直接选择同意授权

纯血鸿蒙「扩圈」100天,酝酿已久的突围

坦白讲&#xff0c;去年参加华为开发者大会看到HarmonyOS NEXT&#xff08;仅运行鸿蒙原生应用&#xff0c;所以也称作「纯血鸿蒙」&#xff09;的时候&#xff0c;小雷也没料想到鸿蒙原生应用生态的发展速度会如此之快。 9月25日&#xff0c;华为正式对外宣布启动HarmonyOS NE…

解决使用localhost或127.0.01模拟CORS失效

解决使用localhost或127.0.01模拟CORS失效 前言问题发现问题解决 前言 CORS (Cross-Origin Resource Sharing) 指的是一种机制&#xff0c;它允许不同源的网页请求访问另一个源服务器上的某些资源。通常情况下&#xff0c;如果 JavaScript 代码在一个源中发起了 AJAX 请求&…

算法通关村番外篇-LeetCode编程从0到1系列二

大家好我是苏麟 , 今天来说LeetCode编程从0到1系列二 . 内置函数 最后一个单词的长度 描述 : 给你一个字符串 s&#xff0c;由若干单词组成&#xff0c;单词前后用一些空格字符隔开。返回字符串中 最后一个 单词的长度。 单词 是指仅由字母组成、不包含任何空格字符的最大子…

FFmpeg获取音视频流信息

文章目录 前言一、需求二、源码三、运行结果 前言 本文记录用 FFmpeg 获取视频流音频流的信息&#xff08;编码格式、分辨率、帧率、播放时长…&#xff09;&#xff0c;所用的工程基于上个博客编译成功的工程&#xff1a;使用FFmpeg4.3.1的SDK官方开发包编译ffmpeg.c 一、需求…

如何在Android Glide中结合使用CenterCrop和自定义圆角变换(图片部分圆角矩形)

如何在Android Glide中结合使用CenterCrop和自定义圆角变换&#xff08;图片部分圆角矩形&#xff09; 在Android开发中&#xff0c;使用Glide加载图片时&#xff0c;我们经常需要对图片进行特定的处理&#xff0c;比如裁剪和圆角变换&#xff0c;特别是一些设计稿&#xff0c;…

【深度学习:数据增强】计算机视觉中数据增强的完整指南

【深度学习&#xff1a;数据增强】计算机视觉中数据增强的完整指南 为什么要做数据增强&#xff1f;等等&#xff0c;什么是数据增强&#xff1f;数据增强技术数据增强的注意事项和潜在陷阱什么时候应该做数据增强&#xff1f;类不平衡的数据增强那么我应该选择哪些转换呢&…

[足式机器人]Part3 机构运动学与动力学分析与建模 Ch00-2(4) 质量刚体的在坐标系下运动

本文仅供学习使用&#xff0c;总结很多本现有讲述运动学或动力学书籍后的总结&#xff0c;从矢量的角度进行分析&#xff0c;方法比较传统&#xff0c;但更易理解&#xff0c;并且现有的看似抽象方法&#xff0c;两者本质上并无不同。 2024年底本人学位论文发表后方可摘抄 若有…

使用Matlab实现声音信号处理

利用Matlab软件对声音信号进行读取、放音、存储 先去下载一个声音文件&#xff1b;使用这个代码即可 clear; clc; [y, Fs] audioread(xxx.wav); plot(y); y y(:, 1); spectrogram(y); sound(y, Fs); % player audioplayer(y, Fs);y1 diff(y(:, 1)); subplot(2, 1, 1); pl…

LVGL 主题

LVGL 主题 修改样式的一点个人心得 lvgl的样式众多&#xff0c;本人是记不住的&#xff0c;用的时候可以快速查找即可 查看官方例子 查看官方例子可以快速了解组件的基础样式 使用官方的 SquareLineStudio 软件&#xff0c;配置出想要的效果&#xff0c;再生成参考代码 Squ…

【Windows】之微软输入法配置小鹤双拼

前言 Windows 自带的输入法微软输入法本身就是个最简洁、最方便的输入法&#xff0c;不需要去安装多余的第三方输入法软件。同时&#xff0c;微软中文拼音输入法支持双拼输入法&#xff0c;但微软自带的双拼输入法不包含小鹤双拼方案的。所以&#xff0c;在这里将会讲解如何配置…

一、数据结构基本概念

数据结构基本概念 一、数据结构基本概念1.基本概念和术语1.1数据&#xff08;Data&#xff09;1.2 数据元素&#xff08;Data element&#xff09;1.3 数据项 &#xff08;Data Item&#xff09;1.4 数据对象 &#xff08;Data Object&#xff09;1.5 数据结构 &#xff08;Dat…

基于JavaWeb+BS架构+SpringBoot+Vue校园一卡通系统的设计和实现

基于JavaWebBS架构SpringBootVue校园一卡通系统的设计和实现 文末获取源码Lun文目录前言主要技术系统设计功能截图订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 文末获取源码 Lun文目录 第一章 概述 4 1.1 研究背景 4 1.2研究目的及意义 4 1.3国内外发展现状 4 1…

【C语言】指针——从底层原理到应用

C语言指针-从底层原理到花式技巧&#xff0c;用图文和代码帮你讲解透彻 目录 一、前言二、变量与指针的本质 1. 内存地址2. 32位与64位系统3. 变量4. 指针变量5. 操作指针变量 5.1 指针变量自身的值5.2 获取指针变量所指向的数据5.3 以什么样的数据类型来使用/解释指针变量所指…