menu OMG's Blog
search
close
[转] 来将live2d 3.0的模型捕捉到你的博客去吧(通用版)
970 浏览 | 15 评论

本文转自 https://lzh441.cn/index.php/archives/207/

(水不动了,让我偷懒一下)

前言(纯属废话)
Powered By Live2d

自从 live2d 的 web 实现后, 很多博主便喜欢上了 live2d(会动的老婆) 。

但是由于官方 sdk 的限制, 目前能用的版本只有 live2d2.0,
但是有很多自己想放置在博客的模型是 3.0,
但 live2d3.0 需要使用 typescript 来实现,
对于很多萌新博主和托管在 gitgub 等平台的
静态博主来说 typescript 过于困难。
所以之前的解决方案是把 3.0 模型转成 2.0 再放置在博客, 例如
jad 大佬的这篇文章

这种方法会受很大的限制,比如在没有工程文件的情况下,这是一件不可能的事情。
某日,我得到了神乐 mea 的 live2d
(手冲一时爽一直手冲一直爽)

233

但是由于版本是 3.0 所以常规的 live2d.js 是无法让他出现在
网页上的,所以我们现在又和 jad 大佬一样 有两种选择

转换模型 把 Live2 3.0 的模型转换成 2.0
使用的 3.0sdk
转换模型这条路一看就走不通,因为我得到的不是工程文件,而是打包好的模型

所以只能去走第二条路

官方的 sdk 需要使用 typescript,对于蒟蒻的我来说 过于不友好

自己造轮子是根本不存在的

所以,到底有没有办法能让神乐 mea 出现在网页上呢?

答案是肯定的, 就在我要放弃的时候,我想到了万能个 github(gh 牛逼)

我顺利的在 gh 上找到了轮子 不过很遗憾 核心文件夹中缺少了某个文件

以至于无法正常使用, 但某大佬以某种途径 给了我缺失的 js
download

Himehane 大佬的轮子

现在我们来讲讲如何让 3.0 的模型显示出来

首先 在 head 部分引入相应的 js 文件 如果是 typecho 请在主题的 header 中的 </head> 之前加入

<script src="pixi/pixi.min.js"></script>
<script src="core/live2dcubismcore.min.js"></script>
<script src="framework/live2dcubismframework.js"></script>
<script src="framework/live2dcubismpixi.js"></script>
<script src="loadModel.js"></script>

再引入 css 样式

.waifu {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 1;
        font-size: 0;
        transition: all .3s ease-in-out;
        -webkit-transform: translateY(3px);
        transform: translateY(3px); 
        }
    .waifu:hover {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    @media (max-width: 768px) {
        .waifu {
            display: none;
        }
    }
    .waifu-tips {
        opacity: 0;
        width: 250px;
        height: 70px;
        margin: -73px 20px;
        padding: 5px 10px;
        border: 1px solid rgba(224, 186, 140, 0.62);
        border-radius: 12px;
        background-color: rgba(236, 217, 188, 0.5);
        box-shadow: 0 3px 15px 2px rgba(191, 158, 118, 0.2);
        font-size: 12px;
        text-overflow: ellipsis;
        overflow: hidden;
        position: absolute;
        animation-delay: 5s;
        animation-duration: 50s;
        animation-iteration-count: infinite;
        animation-name: shake;
        animation-timing-function: ease-in-out;
    }
    .waifu #live2d{
        position: relative;
    }

    @keyframes shake {
        2% {
            transform: translate(0.5px, -1.5px) rotate(-0.5deg);
        }

        4% {
            transform: translate(0.5px, 1.5px) rotate(1.5deg);
        }

        6% {
            transform: translate(1.5px, 1.5px) rotate(1.5deg);
        }

        8% {
            transform: translate(2.5px, 1.5px) rotate(0.5deg);
        }

        10% {
            transform: translate(0.5px, 2.5px) rotate(0.5deg);
        }

        12% {
            transform: translate(1.5px, 1.5px) rotate(0.5deg);
        }

        14% {
            transform: translate(0.5px, 0.5px) rotate(0.5deg);
        }

        16% {
            transform: translate(-1.5px, -0.5px) rotate(1.5deg);
        }

        18% {
            transform: translate(0.5px, 0.5px) rotate(1.5deg);
        }

        20% {
            transform: translate(2.5px, 2.5px) rotate(1.5deg);
        }

        22% {
            transform: translate(0.5px, -1.5px) rotate(1.5deg);
        }

        24% {
            transform: translate(-1.5px, 1.5px) rotate(-0.5deg);
        }

        26% {
            transform: translate(1.5px, 0.5px) rotate(1.5deg);
        }

        28% {
            transform: translate(-0.5px, -0.5px) rotate(-0.5deg);
        }

        30% {
            transform: translate(1.5px, -0.5px) rotate(-0.5deg);
        }

        32% {
            transform: translate(2.5px, -1.5px) rotate(1.5deg);
        }

        34% {
            transform: translate(2.5px, 2.5px) rotate(-0.5deg);
        }

        36% {
            transform: translate(0.5px, -1.5px) rotate(0.5deg);
        }

        38% {
            transform: translate(2.5px, -0.5px) rotate(-0.5deg);
        }

        40% {
            transform: translate(-0.5px, 2.5px) rotate(0.5deg);
        }

        42% {
            transform: translate(-1.5px, 2.5px) rotate(0.5deg);
        }

        44% {
            transform: translate(-1.5px, 1.5px) rotate(0.5deg);
        }

        46% {
            transform: translate(1.5px, -0.5px) rotate(-0.5deg);
        }

        48% {
            transform: translate(2.5px, -0.5px) rotate(0.5deg);
        }

        50% {
            transform: translate(-1.5px, 1.5px) rotate(0.5deg);
        }

        52% {
            transform: translate(-0.5px, 1.5px) rotate(0.5deg);
        }

        54% {
            transform: translate(-1.5px, 1.5px) rotate(0.5deg);
        }

        56% {
            transform: translate(0.5px, 2.5px) rotate(1.5deg);
        }

        58% {
            transform: translate(2.5px, 2.5px) rotate(0.5deg);
        }

        60% {
            transform: translate(2.5px, -1.5px) rotate(1.5deg);
        }

        62% {
            transform: translate(-1.5px, 0.5px) rotate(1.5deg);
        }

        64% {
            transform: translate(-1.5px, 1.5px) rotate(1.5deg);
        }

        66% {
            transform: translate(0.5px, 2.5px) rotate(1.5deg);
        }

        68% {
            transform: translate(2.5px, -1.5px) rotate(1.5deg);
        }

        70% {
            transform: translate(2.5px, 2.5px) rotate(0.5deg);
        }

        72% {
            transform: translate(-0.5px, -1.5px) rotate(1.5deg);
        }

        74% {
            transform: translate(-1.5px, 2.5px) rotate(1.5deg);
        }

        76% {
            transform: translate(-1.5px, 2.5px) rotate(1.5deg);
        }

        78% {
            transform: translate(-1.5px, 2.5px) rotate(0.5deg);
        }

        80% {
            transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
        }

        82% {
            transform: translate(-1.5px, 0.5px) rotate(-0.5deg);
        }

        84% {
            transform: translate(-0.5px, 0.5px) rotate(1.5deg);
        }

        86% {
            transform: translate(2.5px, 1.5px) rotate(0.5deg);
        }

        88% {
            transform: translate(-1.5px, 0.5px) rotate(1.5deg);
        }

        90% {
            transform: translate(-1.5px, -0.5px) rotate(-0.5deg);
        }

        92% {
            transform: translate(-1.5px, -1.5px) rotate(1.5deg);
        }

        94% {
            transform: translate(0.5px, 0.5px) rotate(-0.5deg);
        }

        96% {
            transform: translate(2.5px, -0.5px) rotate(-0.5deg);
        }

        98% {
            transform: translate(-1.5px, -1.5px) rotate(-0.5deg);
        }

        0%, 100% {
            transform: translate(0, 0) rotate(0);
        }
    }

之后再在你想要加载模型的地方插入

<div class="waifu">
            <div class="waifu-tips" style="opacity: 0;"></div>
            <canvas id="live2d"></canvas>
 </div>
<script>loadModel(modelPath);</script>

此时打开网页 你就可以看见 3.0 的模型已经加载了

轮子中的 loadModel.js 为 live2d 的配置文件

你可以在中更改模型 json 路径(一定要写绝对链接)

偏移位置 渲染比例 宽高 作总数等

如果还有什么问题可以在评论区留言

模型展示

模型收集于互联网 版权属于原作者

本文作者:ohmyga
本文链接:https://ohmyga.cn/p/7.html
最后修改时间:2019-04-21 22:21:56
本站未注明转载的文章均为原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!

评论

textsms
支持Markdown语法
email
link

mode_comment 全部评论 已有 15 条评论 (o゜▽゜)o☆
  1. 2019年03月13日 16:51

    不错,不过只考虑自己弄一个

    1. 2019年03月18日 18:13

      哇 是大佬!

  2. 2019年03月12日 09:31

    好像很强大的样子QwQ

    就是把APlayer挡住了感觉不太舒服(逃

    1. 2019年03月12日 09:33

      emm……第二行删除线没有了QAQ

      1. 2019年03月12日 17:54

        可能我没有允许使用html标签和md语法吧233

  3. 2019年03月01日 20:15

    大佬,受教了

  4. 2019年03月01日 19:16

    好有道理,记录记录

    1. 2019年03月01日 19:17

      哎呀,评论错了,是想评论在你那句“可以偷懒为何不偷懒”那句话下面的 (╯°A°)╯︵○○○

    2. 2019年03月01日 19:16

      ?????

      1. 2019年03月01日 19:19

        尴尬 (╯‵□′)╯︵┴─┴

  5. 2019年02月27日 09:09

    图片上这个好好看,我也考虑要不要弄一下

    1. 2019年02月27日 22:18

      这个可以有

  • 1
  • 2