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

这篇具有很好参考价值的文章主要介绍了【小工具】pixi-live2d-display,直接可用的live2d的交互网页/桌面应用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果:
【小工具】pixi-live2d-display,直接可用的live2d的交互网页/桌面应用,小工具,交互,javascript,开发语言

<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 window
    model.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 tapping

  model2.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>
#control
  position: absolute
  top: 8px
  left: 24px
  color: white
  font-size: 18px
</style>

熟悉了上面这种纯js实现之后,可以融入到electron中,实现桌面宠物,效果图:
【小工具】pixi-live2d-display,直接可用的live2d的交互网页/桌面应用,小工具,交互,javascript,开发语言
还有更多交互相关的请参考
开源项目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文章来源地址https://www.toymoban.com/news/detail-787462.html

到了这里,关于【小工具】pixi-live2d-display,直接可用的live2d的交互网页/桌面应用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 新旧数据比较 直接可用

    我自定义的函数式编程自定义接口 可替换为java.util.function.Function 对比类 使用 具体比较哪些字段,需要在对象重写的equals和hashCode自定义

    2024年02月02日
    浏览(34)
  • 【C#】【源码】直接可用的远程桌面应用

    封闭环境无法拷贝外来的远程桌面软件,所以就直接自己用C#写一个。 本篇会给出完整的编程步骤,照着写就能拥有你自己的远程桌面应用,直接可以运行在局域网。 如果不想自己敲代码,也可以选择直接下载项目资源,解包后直接用VS2019打开即可运行或自行打包成exe: h

    2024年02月07日
    浏览(34)
  • 版图设计工具解析-virtuoso的display.drf文件解析

    virtuoso的版图颜色定义分析 下图为virtuoso的版图颜色,包括填充,轮廓,彩点,线形 本文以smic18mmrf的display.drf文件进行解析 smic18的PDK包下存在display.drf文件  打开文件display.drf文件后看到如下内容 1. 颜色定义模块 采用了RGB格式定义了颜色变量 2. 彩点stipple 以位图的形式定义了

    2024年02月06日
    浏览(40)
  • 【推荐】Oracle Live SQL——在线 Oracle SQL 测试工具

    最近回答了几个 CSDN “学习”功能里“问答”区的一些专业相关问题,回答过程中采用严谨的方式,在 Oracle Live SQL 上进行验证测试。这个很好用的 Oracle APEX 应用我使用好几年了,虽然近年来已转行 MySQL 和国产数据库领域,但仍然会遇到一些 Oracle 的问题,在这上面做在线

    2024年02月09日
    浏览(35)
  • 直接发文!1D-2D-MTF-CNN-GRU-AT多通道图像时序融合的分类/故障识别程序!Excel导入,直接运行

    ​适用平台:Matlab2023版本及以上 本程序同时结合两篇国内顶级EI的方法:提出1D-2D-MTF-CNN-GRU-AT多通道图像时序融合的分类/故障识别程序! ①中文EI期刊《电力自动化设备》12月29号网络首发文献:《基于格拉姆角场与并行CNN的并网逆变器开关管健康诊断》; ②中文EI期刊《电

    2024年01月20日
    浏览(50)
  • uniapp 小程序富文本解析(直接复制代码可用)

    1.首先在 static 文件夹新建一个 richText.js 文件,代码如下: 2.在要用到的页面引入: 3.在要用到文本的地方粘贴,同时在data中声明一个  demoHtml: \\\"\\\",  变量 4.从接口拿到值后赋给demoHtml     

    2024年02月16日
    浏览(38)
  • FFmpeg解码H264视频裸流(直接可用)

    1、写在前面 此文章主要包含解码H264视频流数据,主要有以下几点: 1、H264视频帧为Annex B格式,若使用AVCC格式可自行研究; 2、H264视频裸流,非解码视频文件(若有需要我后期可添加这部分代码); 3、支持输出RGB24或YUV420格式,其他可自行修改; 4、FFmpeg官网代码迭代及接口变

    2024年04月25日
    浏览(41)
  • PCL点云处理之最小二乘直线拟合(2D| 方法2)(❤亲测可用❤)(二百零一)

    在二百章中,我们介绍了一种最小二乘拟合直线点云(2D)的方法,可以获取直线方程系数k,b,这里介绍另一种拟合直线点云的方法,更为简单方便,结果与前者一致,主要内容直接复制代码使用即可,原理简单看代码即可,下面是具体的实现和拟合结果展示 离散点云中拟合规

    2024年02月16日
    浏览(65)
  • logback-spring.xml 的配置及详解(直接复制粘贴可用)

    logback-spring.xml 中有三处需要根据实际业务进行修改, 直接查找“(根据业务修改)”即可进行定位 。 如果不想修改, 直接复制粘贴到自己系统运行也可以,不会报错 。 application.yml 配置 logback-spring.xml 配置

    2024年02月11日
    浏览(58)
  • 纯前端使用Vue3上传文件到minio文件服务器,粘贴直接可用

    1、首先安装minio的插件,因为我使用的vue3,不支持模块化的导入,所以我们使用一个别人写好的vue2的包 2、在需要上传文件的页面导入这个包 3、创建一个minio的客户端 这里说明一下,accessKey、secretKey、sessionToken都是通过接口获取到的 临时凭证 4、 通过带预签名的url上传,首

    2024年04月11日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包