来将live2d 3.0的模型捕捉到你的博客去吧(通用版)

崇宫苟道
崇宫苟道 2月10日
  • 在其它设备中阅读本文章

本文转自 https://ohmyga.net/p/7.html(


  • 前言(纯属废话)
Powered By Live2d


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

但是由于官方 sdk 的限制, 目前能用的版本只有 live2d2.0,
但是有很多自己想放置在博客的模型是 3.0,
但 live2d3.0 需要使用 typescript 来实现, 


对于很多萌新博主和托管在 gitgub 等平台的
静态博主来说 typescript 过于困难。
所以之前的解决方案是把 3.0 模型转成 2.0 再放置在博客, 例如
jad 大佬的这篇文章
这种方法会受很大的限制,比如在没有工程文件的情况下,这是一件不可能的事情。
某日,我得到了神乐 mea 的 live2d

(手冲一时爽一直手冲一直爽) 

​  


但是由于版本是 3.0 所以常规的 live2d.js 是无法让他出现在

网页上的,所以我们现在又和 jad 大佬一样 有两种选择

  1. 转换模型 把 Live2 3.0 的模型转换成 2.0
  2. 使用的 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 路径(一定要写绝对链接)

偏移位置 渲染比例 宽高 mtn 等

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

模型展示

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

本文链接:https://lzh441.cn/index.php/archives/207/
知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行许可。

    YarnSon
    YarnSon  2019-03-30, 22:16

    手机谷歌无法加载

      崇宫苟道
      崇宫苟道  2019-03-31, 15:09

      理论上支持主流浏览器,可能是你浏览器的问题、网络问题或者文件配置问题

    ohmyga
    ohmyga  2019-02-13, 22:33

    啊,是大佬!

      崇宫苟道
      崇宫苟道  2019-02-13, 22:39

      世界上最奇妙的事:被大佬叫大佬