FGHRSH 的博客

Please wait...

网页添加 Live2D 看板娘

没错我也加上了,好萌啊  ⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄ 

最近无意中又看到了 @Jad 大佬的博客,不拖坑了,加加加 233


在 dalao 的 waifu-tips.js 的基础上,实现了套 API,加上了以下功能


  • 可以切换 Live2D 模型了(暂时只有 Pio 和 Tia 酱

  • 支持 随机换装 和 顺序换装(收集了截至目前的 Pio、Tia 全套服装


*需要根据 自身情况 进行定制,不能直接套用(其他资源文件见 打包下载

** waifu-tips.js 的详细设置说明,和 waifu-tips.json 节点说明,见 GitHub - fghrsh/live2d_demo ReadMe


waifu.css

.waifu {
    position: fixed;
    bottom: 0;
    z-index: 1;
    font-size: 0;
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
}
.waifu:hover {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
.waifu-tips {
    opacity: 0;
    margin: -20px 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);
    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-tool {
    display: none;
    color: #aaa;
    top: 50px;
    right: 10px;
    position: absolute;
}
.waifu:hover .waifu-tool {
    display: block;
}
.waifu-tool span {
    display: block;
    cursor: pointer;
    color: #5b6c7d;
    transition: 0.2s;
}
.waifu-tool span:hover {
    color: #34495e;
}
.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);
    }
}
@font-face {
  font-family: 'Flat-UI-Icons';
  src: url('flat-ui-icons-regular.eot');
  src: url('flat-ui-icons-regular.eot?#iefix') format('embedded-opentype'), url('flat-ui-icons-regular.woff') format('woff'), url('flat-ui-icons-regular.ttf') format('truetype'), url('flat-ui-icons-regular.svg#flat-ui-icons-regular') format('svg');
}
[class^="fui-"],
[class*="fui-"] {
  font-family: 'Flat-UI-Icons';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fui-cross:before {
  content: "\e609";
}
.fui-info-circle:before {
  content: "\e60f";
}
.fui-photo:before {
  content: "\e62a";
}
.fui-eye:before {
  content: "\e62c";
}
.fui-chat:before {
  content: "\e62d";
}
.fui-home:before {
  content: "\e62e";
}
.fui-user:before {
  content: "\e631";
}


waifu-tips.js

window.live2d_settings = Array(); /*

    く__,.ヘヽ.    / ,ー、 〉
         \ ', !-─‐-i / /´
          /`ー'    L//`ヽ、            Live2D 看板娘 参数设置
         /  /,  /|  ,  ,    ',                                           Version 1.4.2
       イ  / /-‐/ i L_ ハ ヽ!  i                            Update 2018.11.12
        レ ヘ 7イ`ト  レ'ァ-ト、!ハ|  |  
         !,/7 '0'   ´0iソ|   |   
         |.从"  _   ,,,, / |./   |             网页添加 Live2D 看板娘
         レ'| i>.、,,__ _,.イ /  .i  |                    https://www.fghrsh.net/post/123.html
          レ'| | / k_7_/レ'ヽ, ハ. |           
           | |/i 〈|/  i ,.ヘ | i |    Thanks
          .|/ / i:   ヘ!  \ |          journey-ad / https://github.com/journey-ad/live2d_src
            kヽ>、ハ   _,.ヘ、   /、!            xiazeyu / https://github.com/xiazeyu/live2d-widget.js
           !'〈//`T´', \ `'7'ーr'          Live2d Cubism SDK WebGL 2.1 Projrct & All model authors.
           レ'ヽL__|___i,___,ンレ|ノ
             ト-,/ |___./
             'ー'  !_,.:*********************************************************************************/


// 后端接口
live2d_settings['modelAPI']             = '//live2d.fghrsh.net/api/';   // 自建 API 修改这里
live2d_settings['tipsMessage']          = 'waifu-tips.json';            // 同目录下可省略路径
live2d_settings['hitokotoAPI']          = 'lwl12.com';                  // 一言 API,可选 'lwl12.com', 'hitokoto.cn', 'jinrishici.com'(古诗词)

// 默认模型
live2d_settings['modelId']              = 1;            // 默认模型 ID,可在 F12 控制台找到
live2d_settings['modelTexturesId']      = 53;           // 默认材质 ID,可在 F12 控制台找到

// 工具栏设置
live2d_settings['showToolMenu']         = true;         // 显示 工具栏          ,可选 true(真), false(假)
live2d_settings['canCloseLive2d']       = true;         // 显示 关闭看板娘  按钮,可选 true(真), false(假)
live2d_settings['canSwitchModel']       = true;         // 显示 模型切换    按钮,可选 true(真), false(假)
live2d_settings['canSwitchTextures']    = true;         // 显示 材质切换    按钮,可选 true(真), false(假)
live2d_settings['canSwitchHitokoto']    = true;         // 显示 一言切换    按钮,可选 true(真), false(假)
live2d_settings['canTakeScreenshot']    = true;         // 显示 看板娘截图  按钮,可选 true(真), false(假)
live2d_settings['canTurnToHomePage']    = true;         // 显示 返回首页    按钮,可选 true(真), false(假)
live2d_settings['canTurnToAboutPage']   = true;         // 显示 跳转关于页  按钮,可选 true(真), false(假)

// 模型切换模式
live2d_settings['modelStorage']         = true;         // 记录 ID (刷新后恢复),可选 true(真), false(假)
live2d_settings['modelRandMode']        = 'switch';     // 模型切换,可选 'rand'(随机), 'switch'(顺序)
live2d_settings['modelTexturesRandMode']= 'rand';       // 材质切换,可选 'rand'(随机), 'switch'(顺序)

// 提示消息选项
live2d_settings['showHitokoto']         = true;         // 显示一言
live2d_settings['showF12Status']        = true;         // 显示加载状态
live2d_settings['showF12Message']       = false;        // 显示看板娘消息
live2d_settings['showF12OpenMsg']       = true;         // 显示控制台打开提示
live2d_settings['showCopyMessage']      = true;         // 显示 复制内容 提示
live2d_settings['showWelcomeMessage']   = true;         // 显示进入面页欢迎词

//看板娘样式设置
live2d_settings['waifuSize']            = '280x250';    // 看板娘大小,例如 '280x250', '600x535'
live2d_settings['waifuTipsSize']        = '250x70';     // 提示框大小,例如 '250x70', '570x150'
live2d_settings['waifuFontSize']        = '12px';       // 提示框字体,例如 '12px', '30px'
live2d_settings['waifuToolFont']        = '14px';       // 工具栏字体,例如 '14px', '36px'
live2d_settings['waifuToolLine']        = '20px';       // 工具栏行高,例如 '20px', '36px'
live2d_settings['waifuToolTop']         = '0px'         // 工具栏顶部边距,例如 '0px', '-60px'
live2d_settings['waifuMinWidth']        = '768px';      // 面页小于 指定宽度 隐藏看板娘,例如 'disable'(禁用), '768px'
live2d_settings['waifuEdgeSide']        = 'left:0';     // 看板娘贴边方向,例如 'left:0'(靠左 0px), 'right:30'(靠右 30px)
live2d_settings['waifuDraggable']       = 'disable';    // 拖拽样式,例如 'disable'(禁用), 'axis-x'(只能水平拖拽), 'unlimited'(自由拖拽)
live2d_settings['waifuDraggableRevert'] = true;         // 松开鼠标还原拖拽位置,可选 true(真), false(假)

// 其他杂项设置
live2d_settings['l2dVersion']           = '1.4.2';        // 当前版本
live2d_settings['l2dVerDate']           = '2018.11.12'; // 版本更新日期
live2d_settings['homePageUrl']          = 'auto';       // 主页地址,可选 'auto'(自动), '{URL 网址}'
live2d_settings['aboutPageUrl']         = 'https://www.fghrsh.net/post/123.html';   // 关于页地址, '{URL 网址}'
live2d_settings['screenshotCaptureName']= 'live2d.png'; // 看板娘截图文件名,例如 'live2d.png'

/****************************************************************************************************/

String.prototype.render = function(context) {
    var tokenReg = /(\\)?\{([^\{\}\\]+)(\\)?\}/g;

    return this.replace(tokenReg, function (word, slash1, token, slash2) {
        if (slash1 || slash2) { return word.replace('\\', ''); }
        
        var variables = token.replace(/\s/g, '').split('.');
        var currentObject = context;
        var i, length, variable;
        
        for (i = 0, length = variables.length; i < length; ++i) {
            variable = variables[i];
            currentObject = currentObject[variable];
            if (currentObject === undefined || currentObject === null) return '';
        }
        return currentObject;
    });
};

var re = /x/;
console.log(re);

function empty(obj) {return typeof obj=="undefined"||obj==null||obj==""?true:false}
function getRandText(text) {return Array.isArray(text) ? text[Math.floor(Math.random() * text.length + 1)-1] : text}

function showMessage(text, timeout, flag) {
    if(flag || sessionStorage.getItem('waifu-text') === '' || sessionStorage.getItem('waifu-text') === null){
        if(Array.isArray(text)) text = text[Math.floor(Math.random() * text.length + 1)-1];
        if (live2d_settings.showF12Message) console.log('[Message]', text.replace(/<[^<>]+>/g,''));
        
        if(flag) sessionStorage.setItem('waifu-text', text);
        
        $('.waifu-tips').stop();
        $('.waifu-tips').html(text).fadeTo(200, 1);
        if (timeout === undefined) timeout = 5000;
        hideMessage(timeout);
    }
}

function hideMessage(timeout) {
    $('.waifu-tips').stop().css('opacity',1);
    if (timeout === undefined) timeout = 5000;
    window.setTimeout(function() {sessionStorage.removeItem('waifu-text')}, timeout);
    $('.waifu-tips').delay(timeout).fadeTo(200, 0);
}

function initModel(waifuPath, type) {
    /* console welcome message */
    eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('8.d(" ");8.d("\\U,.\\y\\5.\\1\\1\\1\\1/\\1,\\u\\2 \\H\\n\\1\\1\\1\\1\\1\\b \', !-\\r\\j-i\\1/\\1/\\g\\n\\1\\1\\1 \\1 \\a\\4\\f\'\\1\\1\\1 L/\\a\\4\\5\\2\\n\\1\\1 \\1 /\\1 \\a,\\1 /|\\1 ,\\1 ,\\1\\1\\1 \',\\n\\1\\1\\1\\q \\1/ /-\\j/\\1\\h\\E \\9 \\5!\\1 i\\n\\1\\1\\1 \\3 \\6 7\\q\\4\\c\\1 \\3\'\\s-\\c\\2!\\t|\\1 |\\n\\1\\1\\1\\1 !,/7 \'0\'\\1\\1 \\X\\w| \\1 |\\1\\1\\1\\n\\1\\1\\1\\1 |.\\x\\"\\1\\l\\1\\1 ,,,, / |./ \\1 |\\n\\1\\1\\1\\1 \\3\'| i\\z.\\2,,A\\l,.\\B / \\1.i \\1|\\n\\1\\1\\1\\1\\1 \\3\'| | / C\\D/\\3\'\\5,\\1\\9.\\1|\\n\\1\\1\\1\\1\\1\\1 | |/i \\m|/\\1 i\\1,.\\6 |\\F\\1|\\n\\1\\1\\1\\1\\1\\1.|/ /\\1\\h\\G \\1 \\6!\\1\\1\\b\\1|\\n\\1\\1\\1 \\1 \\1 k\\5>\\2\\9 \\1 o,.\\6\\2 \\1 /\\2!\\n\\1\\1\\1\\1\\1\\1 !\'\\m//\\4\\I\\g\', \\b \\4\'7\'\\J\'\\n\\1\\1\\1\\1\\1\\1 \\3\'\\K|M,p,\\O\\3|\\P\\n\\1\\1\\1\\1\\1 \\1\\1\\1\\c-,/\\1|p./\\n\\1\\1\\1\\1\\1 \\1\\1\\1\'\\f\'\\1\\1!o,.:\\Q \\R\\S\\T v"+e.V+" / W "+e.N);8.d(" ");',60,60,'|u3000|uff64|uff9a|uff40|u30fd|uff8d||console|uff8a|uff0f|uff3c|uff84|log|live2d_settings|uff70|u00b4|uff49||u2010||u3000_|u3008||_|___|uff72|u2500|uff67|u30cf|u30fc||u30bd|u4ece|u30d8|uff1e|__|u30a4|k_|uff17_|u3000L_|u3000i|uff1a|u3009|uff34|uff70r|u30fdL__||___i|l2dVerDate|u30f3|u30ce|nLive2D|u770b|u677f|u5a18|u304f__|l2dVersion|FGHRSH|u00b40i'.split('|'),0,{}));
    
    /* 判断 JQuery */
    if (typeof($.ajax) != 'function') typeof(jQuery.ajax) == 'function' ? window.$ = jQuery : console.log('[Error] JQuery is not defined.');
    
    /* 加载看板娘样式 */
    live2d_settings.waifuSize = live2d_settings.waifuSize.split('x');
    live2d_settings.waifuTipsSize = live2d_settings.waifuTipsSize.split('x');
    live2d_settings.waifuEdgeSide = live2d_settings.waifuEdgeSide.split(':');
    
    $("#live2d").attr("width",live2d_settings.waifuSize[0]);
    $("#live2d").attr("height",live2d_settings.waifuSize[1]);
    $(".waifu-tips").width(live2d_settings.waifuTipsSize[0]);
    $(".waifu-tips").height(live2d_settings.waifuTipsSize[1]);
    $(".waifu-tips").css("top",live2d_settings.waifuToolTop);
    $(".waifu-tips").css("font-size",live2d_settings.waifuFontSize);
    $(".waifu-tool").css("font-size",live2d_settings.waifuToolFont);
    $(".waifu-tool span").css("line-height",live2d_settings.waifuToolLine);
    
    if (live2d_settings.waifuEdgeSide[0] == 'left') $(".waifu").css("left",live2d_settings.waifuEdgeSide[1]+'px');
    else if (live2d_settings.waifuEdgeSide[0] == 'right') $(".waifu").css("right",live2d_settings.waifuEdgeSide[1]+'px');
    
    window.waifuResize = function() { $(window).width() <= Number(live2d_settings.waifuMinWidth.replace('px','')) ? $(".waifu").hide() : $(".waifu").show(); };
    if (live2d_settings.waifuMinWidth != 'disable') { waifuResize(); $(window).resize(function() {waifuResize()}); }
    
    try {
        if (live2d_settings.waifuDraggable == 'axis-x') $(".waifu").draggable({ axis: "x", revert: live2d_settings.waifuDraggableRevert });
        else if (live2d_settings.waifuDraggable == 'unlimited') $(".waifu").draggable({ revert: live2d_settings.waifuDraggableRevert });
        else $(".waifu").css("transition", 'all .3s ease-in-out');
    } catch(err) { console.log('[Error] JQuery UI is not defined.') }
    
    live2d_settings.homePageUrl == 'auto' ? window.location.protocol+'//'+window.location.hostname+'/' : live2d_settings.homePageUrl;
    if (window.location.protocol == 'file:' && live2d_settings.modelAPI.substr(0,2) == '//') live2d_settings.modelAPI = 'http:'+live2d_settings.modelAPI;
    
    $('.waifu-tool .fui-home').click(function (){
        //window.location = 'https://www.fghrsh.net/';
        window.location = live2d_settings.homePageUrl;
    });
    
    $('.waifu-tool .fui-info-circle').click(function (){
        //window.open('https://imjad.cn/archives/lab/add-dynamic-poster-girl-with-live2d-to-your-blog-02');
        window.open(live2d_settings.aboutPageUrl);
    });
    
    if (typeof(waifuPath) == "object") loadTipsMessage(waifuPath); else {
        $.ajax({
            cache: true,
            url: waifuPath == '' ? live2d_settings.tipsMessage : (waifuPath.substr(waifuPath.length-15)=='waifu-tips.json'?waifuPath:waifuPath+'waifu-tips.json'),
            dataType: "json",
            success: function (result){ loadTipsMessage(result); }
        });
    }
    
    if (!live2d_settings.showToolMenu) $('.waifu-tool').hide();
    if (!live2d_settings.canCloseLive2d) $('.waifu-tool .fui-cross').hide();
    if (!live2d_settings.canSwitchModel) $('.waifu-tool .fui-eye').hide();
    if (!live2d_settings.canSwitchTextures) $('.waifu-tool .fui-user').hide();
    if (!live2d_settings.canSwitchHitokoto) $('.waifu-tool .fui-chat').hide();
    if (!live2d_settings.canTakeScreenshot) $('.waifu-tool .fui-photo').hide();
    if (!live2d_settings.canTurnToHomePage) $('.waifu-tool .fui-home').hide();
    if (!live2d_settings.canTurnToAboutPage) $('.waifu-tool .fui-info-circle').hide();

    if (waifuPath === undefined) waifuPath = '';
    var modelId = localStorage.getItem('modelId');
    var modelTexturesId = localStorage.getItem('modelTexturesId');
    
    if (!live2d_settings.modelStorage || modelId == null) {
        var modelId = live2d_settings.modelId;
        var modelTexturesId = live2d_settings.modelTexturesId;
    } loadModel(modelId, modelTexturesId);
}

function loadModel(modelId, modelTexturesId=0) {
    if (live2d_settings.modelStorage) {
        localStorage.setItem('modelId', modelId);
        localStorage.setItem('modelTexturesId', modelTexturesId);
    } else {
        sessionStorage.setItem('modelId', modelId);
        sessionStorage.setItem('modelTexturesId', modelTexturesId);
    } loadlive2d('live2d', live2d_settings.modelAPI+'get/?id='+modelId+'-'+modelTexturesId, (live2d_settings.showF12Status ? console.log('[Status]','live2d','模型',modelId+'-'+modelTexturesId,'加载完成'):null));
}

function loadTipsMessage(result) {
    window.waifu_tips = result;
    
    $.each(result.mouseover, function (index, tips){
        $(document).on("mouseover", tips.selector, function (){
            var text = getRandText(tips.text);
            text = text.render({text: $(this).text()});
            showMessage(text, 3000);
        });
    });
    $.each(result.click, function (index, tips){
        $(document).on("click", tips.selector, function (){
            var text = getRandText(tips.text);
            text = text.render({text: $(this).text()});
            showMessage(text, 3000, true);
        });
    });
    $.each(result.seasons, function (index, tips){
        var now = new Date();
        var after = tips.date.split('-')[0];
        var before = tips.date.split('-')[1] || after;
        
        if((after.split('/')[0] <= now.getMonth()+1 && now.getMonth()+1 <= before.split('/')[0]) && 
           (after.split('/')[1] <= now.getDate() && now.getDate() <= before.split('/')[1])){
            var text = getRandText(tips.text);
            text = text.render({year: now.getFullYear()});
            showMessage(text, 6000, true);
        }
    });
    
    if (live2d_settings.showF12OpenMsg) {
        re.toString = function() {
            showMessage(getRandText(result.waifu.console_open_msg), 5000, true);
            return '';
        };
    }
    
    if (live2d_settings.showCopyMessage) {
        $(document).on('copy', function() {
            showMessage(getRandText(result.waifu.copy_message), 5000, true);
        });
    }
    
    $('.waifu-tool .fui-photo').click(function(){
        showMessage(getRandText(result.waifu.screenshot_message), 5000, true);
        window.Live2D.captureName = live2d_settings.screenshotCaptureName;
        window.Live2D.captureFrame = true;
    });
    
    $('.waifu-tool .fui-cross').click(function(){
        sessionStorage.setItem('waifu-dsiplay', 'none');
        showMessage(getRandText(result.waifu.hidden_message), 1300, true);
        window.setTimeout(function() {$('.waifu').hide();}, 1300);
    });
    
    window.showWelcomeMessage = function(result) {
        var text;
        if (window.location.href == live2d_settings.homePageUrl) {
            var now = (new Date()).getHours();
            if (now > 23 || now <= 5) text = getRandText(result.waifu.hour_tips.t23-5);
            else if (now > 5 && now <= 7) text = getRandText(result.waifu.hour_tips.t5-7);
            else if (now > 7 && now <= 11) text = getRandText(result.waifu.hour_tips.t7-11);
            else if (now > 11 && now <= 14) text = getRandText(result.waifu.hour_tips.t11-14);
            else if (now > 14 && now <= 17) text = getRandText(result.waifu.hour_tips.t14-17);
            else if (now > 17 && now <= 19) text = getRandText(result.waifu.hour_tips.t17-19);
            else if (now > 19 && now <= 21) text = getRandText(result.waifu.hour_tips.t19-21);
            else if (now > 21 && now <= 23) text = getRandText(result.waifu.hour_tips.t21-23);
            else text = getRandText(result.waifu.hour_tips.default);
        } else {
            var referrer_message = result.waifu.referrer_message;
            if (document.referrer !== '') {
                var referrer = document.createElement('a');
                referrer.href = document.referrer;
                var domain = referrer.hostname.split('.')[1];
                if (window.location.hostname == referrer.hostname)
                    text = referrer_message.localhost[0] + document.title.split(referrer_message.localhost[2])[0] + referrer_message.localhost[1];
                else if (domain == 'baidu')
                    text = referrer_message.baidu[0] + referrer.search.split('&wd=')[1].split('&')[0] + referrer_message.baidu[1];
                else if (domain == 'so')
                    text = referrer_message.so[0] + referrer.search.split('&q=')[1].split('&')[0] + referrer_message.so[1];
                else if (domain == 'google')
                    text = referrer_message.google[0] + document.title.split(referrer_message.google[2])[0] + referrer_message.google[1];
                else {
                    $.each(result.waifu.referrer_hostname, function(i,val) {if (i==referrer.hostname) referrer.hostname = getRandText(val)});
                    text = referrer_message.default[0] + referrer.hostname + referrer_message.default[1];
                }
            } else text = referrer_message.none[0] + document.title.split(referrer_message.none[2])[0] + referrer_message.none[1];
        }
        showMessage(text, 6000);
    }; if (live2d_settings.showWelcomeMessage) showWelcomeMessage(result);
    
    var waifu_tips = result.waifu;
    
    function loadOtherModel() {
        var modelId = modelStorageGetItem('modelId');
        var modelRandMode = live2d_settings.modelRandMode;
        
        $.ajax({
            cache: modelRandMode == 'switch' ? true : false,
            url: live2d_settings.modelAPI+modelRandMode+'/?id='+modelId,
            dataType: "json",
            success: function(result) {
                loadModel(result.model['id']);
                var message = result.model['message'];
                $.each(waifu_tips.model_message, function(i,val) {if (i==result.model['id']) message = getRandText(val)});
                showMessage(message, 3000, true);
            }
        });
    }
    
    function loadRandTextures() {
        var modelId = modelStorageGetItem('modelId');
        var modelTexturesId = modelStorageGetItem('modelTexturesId');
        var modelTexturesRandMode = live2d_settings.modelTexturesRandMode;
        
        $.ajax({
            cache: modelTexturesRandMode == 'switch' ? true : false,
            url: live2d_settings.modelAPI+modelTexturesRandMode+'_textures/?id='+modelId+'-'+modelTexturesId,
            dataType: "json",
            success: function(result) {
                if (result.textures['id'] == 1 && (modelTexturesId == 1 || modelTexturesId == 0))
                    showMessage(waifu_tips.load_rand_textures[0], 3000, true);
                else showMessage(waifu_tips.load_rand_textures[1], 3000, true);
                loadModel(modelId, result.textures['id']);
            }
        });
    }
    
    function modelStorageGetItem(key) { return live2d_settings.modelStorage ? localStorage.getItem(key) : sessionStorage.getItem(key); }
    
    /* 检测用户活动状态,并在空闲时显示一言 */
    if (live2d_settings.showHitokoto) {
        window.getActed = false; window.hitokotoTimer = 0; window.hitokotoInterval = false;
        $(document).mousemove(function(e){getActed = true;}).keydown(function(){getActed = true;});
        setInterval(function(){ if (!getActed) ifActed(); else elseActed(); }, 1000);
    }
    
    function ifActed() {
        if (!hitokotoInterval) {
            hitokotoInterval = true;
            hitokotoTimer = window.setInterval(showHitokotoActed, 30000);
        }
    }
    
    function elseActed() {
        getActed = hitokotoInterval = false;
        window.clearInterval(hitokotoTimer);
    }
    
    function showHitokotoActed() {
        if ($(document)[0].visibilityState == 'visible') showHitokoto();
    }
    
    function showHitokoto() {
    	switch(live2d_settings.hitokotoAPI) {
    	    case 'lwl12.com':
    	        $.getJSON('https://api.lwl12.com/hitokoto/v1?encode=realjson',function(result){
        	        if (!empty(result.source)) {
                        var text = waifu_tips.hitokoto_api_message['lwl12.com'][0];
                        if (!empty(result.author)) text += waifu_tips.hitokoto_api_message['lwl12.com'][1];
                        text = text.render({source: result.source, creator: result.author});
                        window.setTimeout(function() {showMessage(text+waifu_tips.hitokoto_api_message['lwl12.com'][2], 3000, true);}, 5000);
                    } showMessage(result.text, 5000, true);
                });break;
    	    case 'fghrsh.net':
    	        $.getJSON('https://api.fghrsh.net/hitokoto/rand/?encode=jsc&uid=3335',function(result){
            	    if (!empty(result.source)) {
                        var text = waifu_tips.hitokoto_api_message['fghrsh.net'][0];
                        text = text.render({source: result.source, date: result.date});
                        window.setTimeout(function() {showMessage(text, 3000, true);}, 5000);
                        showMessage(result.hitokoto, 5000, true);
            	    }
                });break;
            case 'jinrishici.com':
                $.ajax({
                    url: 'https://v2.jinrishici.com/one.json',
                    xhrFields: {withCredentials: true},
                    success: function (result, status) {
                        if (!empty(result.data.origin.title)) {
                            var text = waifu_tips.hitokoto_api_message['jinrishici.com'][0];
                            text = text.render({title: result.data.origin.title, dynasty: result.data.origin.dynasty, author:result.data.origin.author});
                            window.setTimeout(function() {showMessage(text, 3000, true);}, 5000);
                        } showMessage(result.data.content, 5000, true);
                    }
                });break;
    	    default:
    	        $.getJSON('https://v1.hitokoto.cn',function(result){
            	    if (!empty(result.from)) {
                        var text = waifu_tips.hitokoto_api_message['hitokoto.cn'][0];
                        text = text.render({source: result.from, creator: result.creator});
                        window.setTimeout(function() {showMessage(text, 3000, true);}, 5000);
            	    }
                    showMessage(result.hitokoto, 5000, true);
                });
    	}
    }
    
    $('.waifu-tool .fui-eye').click(function (){loadOtherModel()});
    $('.waifu-tool .fui-user').click(function (){loadRandTextures()});
    $('.waifu-tool .fui-chat').click(function (){showHitokoto()});
}


waifu-tips.json

{
    "waifu": {
        "console_open_msg": ["哈哈,你打开了控制台,是想要看看我的秘密吗?"],
        "copy_message": ["你都复制了些什么呀,转载要记得加上出处哦"],
        "screenshot_message": ["照好了嘛,是不是很可爱呢?"],
        "hidden_message": ["我们还能再见面的吧…"],
        "load_rand_textures": ["我还没有其他衣服呢", "我的新衣服好看嘛"],
        "hour_tips": {
            "t5-7": ["早上好!一日之计在于晨,美好的一天就要开始了"],
            "t7-11": ["上午好!工作顺利嘛,不要久坐,多起来走动走动哦!"],
            "t11-14": ["中午了,工作了一个上午,现在是午餐时间!"],
            "t14-17": ["午后很容易犯困呢,今天的运动目标完成了吗?"],
            "t17-19": ["傍晚了!窗外夕阳的景色很美丽呢,最美不过夕阳红~"],
            "t19-21": ["晚上好,今天过得怎么样?"],
            "t21-23": ["已经这么晚了呀,早点休息吧,晚安~"],
            "t23-5": ["你是夜猫子呀?这么晚还不睡觉,明天起的来嘛"],
            "default": ["嗨~ 快来逗我玩吧!"]
        },
        "referrer_message": {
            "localhost": ["欢迎阅读<span style=\"color:#0099cc;\">『", "』</span>", " - "],
            "baidu": ["Hello! 来自 百度搜索 的朋友<br>你是搜索 <span style=\"color:#0099cc;\">", "</span> 找到的我吗?"],
            "so": ["Hello! 来自 360搜索 的朋友<br>你是搜索 <span style=\"color:#0099cc;\">", "</span> 找到的我吗?"],
            "google": ["Hello! 来自 谷歌搜索 的朋友<br>欢迎阅读<span style=\"color:#0099cc;\">『", "』</span>", " - "],
            "default": ["Hello! 来自 <span style=\"color:#0099cc;\">", "</span> 的朋友"],
            "none": ["欢迎阅读<span style=\"color:#0099cc;\">『", "』</span>", " - "]
        },
        "referrer_hostname": {
            "example.com": ["示例网站"],
            "www.fghrsh.net": ["FGHRSH 的博客"]
        },
        "model_message": {
            "1": ["来自 Potion Maker 的 Pio 酱 ~"],
            "2": ["来自 Potion Maker 的 Tia 酱 ~"]  
        },
        "hitokoto_api_message": {
            "lwl12.com": ["这句一言来自 <span style=\"color:#0099cc;\">『{source}』</span>", ",是 <span style=\"color:#0099cc;\">{creator}</span> 投稿的", "。"],
            "fghrsh.net": ["这句一言出处是 <span style=\"color:#0099cc;\">『{source}』</span>,是 <span style=\"color:#0099cc;\">FGHRSH</span> 在 {date} 收藏的!"],
            "jinrishici.com": ["这句诗词出自 <span style=\"color:#0099cc;\">《{title}》</span>,是 {dynasty}诗人 {author} 创作的!"],
            "hitokoto.cn": ["这句一言来自 <span style=\"color:#0099cc;\">『{source}』</span>,是 <span style=\"color:#0099cc;\">{creator}</span> 在 hitokoto.cn 投稿的。"]
        }
    },
    "mouseover": [
        { "selector": ".container a[href^='http']", "text": ["要看看 <span style=\"color:#0099cc;\">{text}</span> 么?"] },
        { "selector": ".fui-home", "text": ["点击前往首页,想回到上一页可以使用浏览器的后退功能哦"] },
        { "selector": ".fui-chat", "text": ["一言一语,一颦一笑。一字一句,一颗赛艇。"] },
        { "selector": ".fui-eye", "text": ["嗯··· 要切换 看板娘 吗?"] },
        { "selector": ".fui-user", "text": ["喜欢换装 Play 吗?"] },
        { "selector": ".fui-photo", "text": ["要拍张纪念照片吗?"] },
        { "selector": ".fui-info-circle", "text": ["这里有关于我的信息呢"] },
        { "selector": ".fui-cross", "text": ["你不喜欢我了吗..."] },
        { "selector": "#tor_show", "text": ["翻页比较麻烦吗,点击可以显示这篇文章的目录呢"] },
        { "selector": "#comment_go", "text": ["想要去评论些什么吗?"] },
        { "selector": "#night_mode", "text": ["深夜时要爱护眼睛呀"] },
        { "selector": "#qrcode", "text": ["手机扫一下就能继续看,很方便呢"] },
        { "selector": ".comment_reply", "text": ["要吐槽些什么呢"] },
        { "selector": "#back-to-top", "text": ["回到开始的地方吧"] },
        { "selector": "#author", "text": ["该怎么称呼你呢"] },
        { "selector": "#mail", "text": ["留下你的邮箱,不然就是无头像人士了"] },
        { "selector": "#url", "text": ["你的家在哪里呢,好让我去参观参观"] },
        { "selector": "#textarea", "text": ["认真填写哦,垃圾评论是禁止事项"] },
        { "selector": ".OwO-logo", "text": ["要插入一个表情吗"] },
        { "selector": "#csubmit", "text": ["要[提交]^(Commit)了吗,首次评论需要审核,请耐心等待~"] },
        { "selector": ".ImageBox", "text": ["点击图片可以放大呢"] },
        { "selector": "input[name=s]", "text": ["找不到想看的内容?搜索看看吧"] },
        { "selector": ".previous", "text": ["去上一页看看吧"] },
        { "selector": ".next", "text": ["去下一页看看吧"] },
        { "selector": ".dropdown-toggle", "text": ["这里是菜单"] },
        { "selector": "c-player a.play-icon", "text": ["想要听点音乐吗"] },
        { "selector": "c-player div.time", "text": ["在这里可以调整<span style=\"color:#0099cc;\">播放进度</span>呢"] },
        { "selector": "c-player div.volume", "text": ["在这里可以调整<span style=\"color:#0099cc;\">音量</span>呢"] },
        { "selector": "c-player div.list-button", "text": ["<span style=\"color:#0099cc;\">播放列表</span>里都有什么呢"] },
        { "selector": "c-player div.lyric-button", "text": ["有<span style=\"color:#0099cc;\">歌词</span>的话就能跟着一起唱呢"] },
        { "selector": ".waifu #live2d", "text": ["干嘛呢你,快把手拿开", "鼠…鼠标放错地方了!"] }
    ],
    "click": [
        {
            "selector": ".waifu #live2d",
            "text": [
                "是…是不小心碰到了吧",
                "萝莉控是什么呀",
                "你看到我的小熊了吗",
                "再摸的话我可要报警了!⌇●﹏●⌇",
                "110吗,这里有个变态一直在摸我(ó﹏ò。)"
            ]
        }
    ],
    "seasons": [
        { "date": "01/01", "text": ["<span style=\"color:#0099cc;\">元旦</span>了呢,新的一年又开始了,今年是{year}年~"] },
        { "date": "02/14", "text": ["又是一年<span style=\"color:#0099cc;\">情人节</span>,{year}年找到对象了嘛~"] },
        { "date": "03/08", "text": ["今天是<span style=\"color:#0099cc;\">妇女节</span>!"] },
        { "date": "03/12", "text": ["今天是<span style=\"color:#0099cc;\">植树节</span>,要保护环境呀"] },
        { "date": "04/01", "text": ["悄悄告诉你一个秘密~<span style=\"background-color:#34495e;\">今天是愚人节,不要被骗了哦~</span>"] },
        { "date": "05/01", "text": ["今天是<span style=\"color:#0099cc;\">五一劳动节</span>,计划好假期去哪里了吗~"] },
        { "date": "06/01", "text": ["<span style=\"color:#0099cc;\">儿童节</span>了呢,快活的时光总是短暂,要是永远长不大该多好啊…"] },
        { "date": "09/03", "text": ["<span style=\"color:#0099cc;\">中国人民抗日战争胜利纪念日</span>,铭记历史、缅怀先烈、珍爱和平、开创未来。"] },
        { "date": "09/10", "text": ["<span style=\"color:#0099cc;\">教师节</span>,在学校要给老师问声好呀~"] },
        { "date": "10/01", "text": ["<span style=\"color:#0099cc;\">国庆节</span>,新中国已经成立69年了呢"] },
        { "date": "11/05-11/12", "text": ["今年的<span style=\"color:#0099cc;\">双十一</span>是和谁一起过的呢~"] },
        { "date": "12/20-12/31", "text": ["这几天是<span style=\"color:#0099cc;\">圣诞节</span>,主人肯定又去剁手买买买了~"] }
    ]
}


加进 header.php

<!-- 加载样式 -->
<link rel="stylesheet" type="text/css" href="https://www.example.com/path/to/waifu.css"/>


加进 footer.php(须 jQuery 支持)

<div class="waifu">
    
    <!-- 提示框 -->
    <div class="waifu-tips"></div>
    
    <!-- 看板娘画布 -->
    <canvas id="live2d" class="live2d"></canvas>
    
    <!-- 工具栏 -->
    <div class="waifu-tool">
        <span class="fui-home"></span>
        <span class="fui-chat"></span>
        <span class="fui-eye"></span>
        <span class="fui-user"></span>
        <span class="fui-photo"></span>
        <span class="fui-info-circle"></span>
        <span class="fui-cross"></span>
    </div>
    
</div>

<script src="path/to/waifu-tips.js"></script>
<script src="path/to/live2d.js"></script>

<!-- 初始化看板娘,加载 waifu-tips.json -->
<script type="text/javascript">
	/* 可直接修改部分参数 */
    live2d_settings['modelId'] = 5;                  // 默认模型 ID
    live2d_settings['modelTexturesId'] = 1;          // 默认材质 ID
	/* 在 initModel 前添加 */
	initModel("https://www.example.com/path/to/waifu-tips.json")
</script>


或 实现自动加载,在 footer.php 的最后加上

<script src="https://www.example.com/path/to/autoload.js" type="text/javascript"></script>


autoload.js

// 加载 CSS
$("<link>").attr({href: "https://www.example.com/path/to/waifu.css", rel: "stylesheet", type: "text/css"}).appendTo('head');

// 插入 DIV
$('body').append('<div class="waifu"><div class="waifu-tips"></div><canvas id="live2d" class="live2d"></canvas><div class="waifu-tool"><span class="fui-home"></span> <span class="fui-chat"></span> <span class="fui-eye"></span> <span class="fui-user"></span> <span class="fui-photo"></span> <span class="fui-info-circle"></span> <span class="fui-cross"></span></div></div>');

// 加载 JS
$.ajax({
	url: 'https://www.example.com/path/to/waifu-tips.js',
	dataType:"script",
	cache: true,
	async: false
});
$.ajax({
	url: 'https://www.example.com/path/to/live2d.js',
	dataType:"script",
	cache: true,
	async: false
});

// 初始化看板娘,加载 waifu-tips.json

/* 可直接修改部分参数 */
live2d_settings['modelId'] = 5;                  // 默认模型 ID
live2d_settings['modelTexturesId'] = 1;          // 默认材质 ID
/* 在 initModel 前添加 */
initModel('https://www.example.com/path/to/waifu-tips.json');


Demo


打包下载


API 接口

  • 截至目前,接口每日请求数高达 80+万次,并产生了大量的流量... 

  • 在 2018.05.12~2018.06.10 期间,API 请求数已达到 20138636 次

  • 2020.05.18 更新:近 30 天请求量 400, 000, 000 + 次(4 亿) ...

  • 希望大站大佬们看到能自建 API,源码在上方(可以 QQ 联系我协助搭建 ..

  • 由于涉及版权问题,公共 API 接口不再添加模型,如有需要可以自建 API ...


更新日志

  • 2018-01-03:live2d.js 修复 IE,Edge 兼容性问题

  • 2018-03-02:API 新增 22,33,Shizuku,Neptunia 系列,Murakumo 模型

  • 2018-05-20:修复 waifu-tips.json 导致的 小bug,增加使用 hitokoto.cn 一言 API

  • 2018-10-21:Live2D 看板娘 API 迁移公告,由于 API 请求数过大,另外创建了个地址

  • 2018-11-06:waifu-tips.js 优化空闲显示一言判定,增加看板娘设置,增加更多 一言 API

  • 2018-11-10:优化代码,修复 bug,增加可在 waifu-tips.json 定制提示语,可在外部定义参数

  • 后续日志,见 GitHub - fghrsh/live2d_demo Commits (Live2D 看板娘插件 的前端 HTML 源码)


其他插件

Tips: 以上插件大概能替换 waifu-tips.js 来使用这边的 API (逃

推荐一个 Live2D 模型资源收集站:https://mx.paul.ren/


参考资料




版权信息



唔 ..  搭建遇到的问题 QQ 问我吧,博客评论回复不太方便 ... (联系方式在关于页都有的

本文标题:网页添加 Live2D 看板娘
本文链接:https://www.fghrsh.net/post/123.html
作者授权:除特别说明外,本文由 fghrsh 原创编译并授权 FGHRSH 的博客 刊载发布。
版权声明:本文使用「署名-非商业性使用-相同方式共享 4.0 国际」创作共享协议,转载或使用请遵守署名协议。

网友评论387

  1. 蔚然 2024-03-16 16:26:15 回复

    有教程吗大佬

  1. fish 2023-04-17 22:44:15 回复

    呜呜呜,为什么 不运行服务器就可以显示模型,运行了服务器就没了

  1. iammagic 2022-10-29 18:29:05 回复

    Failed to load resource: the server responded with a status of 404 () grm/src/main/resources/public/css/waifu-tips.json
    报错这个怎么解决啊

  1. 一句没听懂 2022-10-08 21:25:23 回复

    纯小白,大佬可以教教吗,看了好多文章,还是不会....qq:3085714802

  1. 小白 2022-08-19 12:44:15 回复

    为什么添加了不显示模型呀大佬

  1. saltedfish 2022-04-16 00:38:25 回复

    大佬,我PHP已经使用了5.2的版本,json扩展也已经安装好了,但是还是无法获取到模型,日志一直在报错:Access to XMLHttpRequest at 'https://live2d.saltedfish.xyz/api/get/?id=3-17' from origin 'http://localhost:4000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
    大佬能帮我看看这是怎么会回事吗?

  1. xibaibai 2022-04-13 11:56:05 回复

    请问各位有没有用hexo成功搭建这个看板娘的,我已经弄了很久也没成功,求一个教程,谢谢

    1. xibaibai 2022-04-25 11:23:57 回复

      谢谢大佬的教程,已经解决了问题,成功在hexo上配置了看板娘。

      1. 全之 2023-12-19 21:06:02 回复

        轮到我了,大佬求带

        1. xibaibai 2023-12-19 21:13:22 回复

          可以点我的昵称去我的博客,我记录了搭建的过程。《记录一下搭建 blog 的经验》这个里面有写怎么搭建的

      1. 闪光桐人 2022-08-17 23:29:41 回复

        教教我呜呜呜┭┮﹏┭┮

        1. 闪光桐人 2022-08-18 16:34:32 回复

          我也成功了!谢谢大佬的项目

  1. sgseo 2022-03-04 01:34:06 回复

    不错啊~~~~~

  1. c 2022-02-28 16:22:27 回复

    看着就很乱,可以重新设计一下

  1. c 2022-02-28 16:20:47 回复

    这个评论设计的很6666

  1. 微笑 2022-02-21 17:46:15 回复

    希望可以參考該資源庫https://github.com/stevenjoezhang/live2d-widget
    編寫支援靜態API的模式,進而降低自架sever成本。

  1. 闻君心 2022-01-27 22:43:45 回复

    腾讯云CDN有500G的流量不怎么用,天翼云CDN也有500个G没用过,华为云也有个六折优惠券(14天内到期)可以买流量包,大佬有需要可以发个邮件给我,大佬的域名,如果能帮上忙就很不错啦😀(live2d-api.wjxhub.com这是我搭建的,开了防盗链,谁有需要也可以邮件我[email protected]呀,我解除一下防盗链就行)

    1. fghrsh 2022-01-28 21:43:47 回复

      (˃ ʌ ˂) 这个流量估计不是传统计费 CDN 能顶得住的 ... (指账单 ...
      看了下 jsdelivr 的数据
      fghrsh/live2d_api had 714 002 844 CDN hits in the last year
      source: https://www.jsdelivr.com/package/gh/fghrsh/live2d_api

      1. 闻君心 2022-02-01 20:56:01 回复

        所以能自建API的就自建吧, 不自建就走jsdelivr慢一点. 如果jsdelivr能恢复中国大陆的服务就好了.😀

      1. 闻君心 2022-02-01 19:22:20 回复

        估算了一下, 711 700 865个请求Hit, 平均一个文件大概三四十K, 算下来去年干了4~5个T, 如果请求数不付费的话, my god(还好jsdelivr免费, 就是上一年年末挂了太可惜了)

        1. fghrsh 2022-02-01 20:18:26 回复

          一个月就不止 4、5T 了 ... Live2D 的材质都挺大的,PNG 图片

  1. m7 2021-10-26 14:57:02 回复

    离大谱,这就是大佬吗,我直接一个您

  1. 抹茶豆 2021-10-26 14:55:40 回复

    大佬我想问,我自己打了个api https://api.macchatou.com/live2d/ ,跨域也加header了但是调用的时候总是模型显示不出来报错是
    live2d.js:1 Failed to load (404) : api.macchatou.com/live2d/get/?id=1-0
    e.onload @ live2d.js:1
    我在waifu-tips.js 里设置的默认模型和材质是 5-1但是为什么会自动请求不存在的1-0呢?
    而且请求资源链接会变成https://search.macchatou.com/api.macchatou.com/live2d/get/?id=1-0 。。。就很怪。想知道原因在哪里

  1. 夜雨声繁 2021-10-19 15:35:18 回复

    楼主你网页的播放器是什么插件啊

  1. F00l 2021-10-15 17:48:13 回复

    苟。。。

  1. 仮面 2021-08-15 15:27:09 回复

    箱请教一下,我从游戏里面提取了live2d皮肤的文件,但是他的motions文件里面是json文件,其他json文件的名称和里面的数据格式也有些差异,有点像Facerig3~4的那种格式,不知道能不能转换成这个可以使用的格式

    1. 仮面 2021-08-15 17:41:16 回复

      没注意看,原来是moc3的

  1. 螂海 2021-08-07 09:54:03 回复

    太强了太强了!!!

  1. qcqcqc 2021-08-06 17:12:15 回复

    大佬你QQ多少 能不能加一下

  1. ITXWZ 2021-07-18 21:01:44 回复

    QQ:3222690362求指导api自建

  1. galaxy 2021-04-30 14:45:08 回复

    大佬,请问怎么把对话框挪上去一些呢?

  1. 1234 2021-04-27 21:37:13 回复

    如何添加您qq

    1. 1234 2021-04-27 21:38:13 回复

      你好大佬,实在是太难了,能qq上面交我吗

  1. 小儿麻痹 2021-04-21 13:03:10 回复

    大佬,为啥我粘到网页不运行了?我看别人都用canvas标签,我没用,我直接用的div为啥不行呢?

    1. fghrsh 2021-04-22 23:26:47 回复

      看板娘是用 canvas 绘制的,必须要有 ...

      1. 2021-05-04 10:14:12 回复

        大佬,音乐插卡可以分享一下吗

  1. 徐兜兜 2021-03-04 11:58:37 回复

    一直在左边,怎么调到右侧

  1. ZiyuanLiu 2021-03-01 00:02:27 回复

    大佬,我在我wp网站上启用了这个插件但前端不显示看板娘,请问有可能是什么原因

  1. BlueHeart0621 2021-02-21 01:02:27 回复

    大佬,请问一下如何在hexo博客中使用,有没有文档之类的呢,之前用的是github上另一个大佬的live2d-widget,但是那个好像不能设置看板娘的一些属性,所以想试试大佬的这个

    1. 全之 2023-12-19 21:45:32 回复

      加一,求一个可以更换的看板娘教程

    1. xibaibai 2022-04-13 12:06:02 回复

      请问您用hexo成功配置了吗,可以的话求一个教程

  1. 水瓶座鬼才 2021-01-16 21:09:18 回复

    大佬,顺便问您一个问题,就是,你这个评论回复的数据库怎么设计,因为这种评论回复一般都得递归查询,但是sql语句我想不出来该怎么写。

  1. 水瓶座鬼才 2021-01-16 19:36:00 回复

    大佬,你这界面做得太棒了

  1. FGHRSG_SZ 2021-01-10 15:27:15 回复

    太浓了,二次元浓度太浓了

  1. 2020-12-29 13:09:33 回复

    感谢博主大佬,已经把看板娘弄到自己的网站了,
    不过发现了一个BUG,设定live2d_settings['waifuEdgeSide'] = 'right:xx';然后live2d_settings['waifuDraggableRevert'] = false;关闭拖拽复位,会出现一个BUG,把看板娘从右往左拖,导致看板娘原位置到新位置所途径范围的下方元素被遮挡无法点击,也无法选取任何文字,从左往右拖动则可以正常点击与选取文字
    当live2d_settings['waifuEdgeSide'] = 'left:xx';时,无此bug,有办法解决这个拖动BUG吗?

  1. 小黑 2020-12-04 18:52:59 回复

    想搭建Api,可惜不会(ಥ_ಥ)

  1. 乌鸦像写字台 2020-11-22 15:16:44 回复

    qq736212233, 请问可以加一下大佬的qq吗? 我这边部署后端api的时候出了点问题, 非常感谢大佬

  1. 赏歌者 2020-10-30 12:36:56 回复

    歌单不错

  1. jsb114110 2020-10-30 10:58:41 回复

    如何自定义弹窗,有接口调用?

  1. 憨批 2020-10-22 17:49:03 回复

    大佬能加个扣扣或者微信吗?想向你学习学习

  1. 依梦 2020-09-30 09:08:03 回复

    大佬,这声音怎么实现

  1. kongkong 2020-08-22 19:20:31 回复

    有没有vue版本的?

    1. mxf 2020-08-26 12:54:44 回复

      我也想问

  1. bluesky 2020-08-11 20:01:32 回复

    Uncaught (in promise) ReferenceError: initWidget is not defined
    怎么办?

  1. gaoyucheng 2020-08-10 18:46:29 回复

    我修改了这个文件waifu-tips.js,但是还是默认。比如说就是说那个关于我的信息按钮URL我改了之后还是会跳转这个地址。https://www.fghrsh.net/post/123.html

    1. gaoyucheng 2020-08-11 09:57:43 回复

      就是这个live2d_settings['waifuMinWidth']= '768px'; ?我没有改还是这个默认的,还是会卡,但好像有一部分浏览器不会

      1. gaoyucheng 2020-08-11 10:03:26 回复

        这个不小心回复重了,因为他告诉我回复楼层最大(●'◡'●)

    1. fghrsh 2020-08-10 22:22:17 回复

      github 上最新的 commit 修复了这个问题 ... 可以克隆下最新的源码

      1. yslf 2020-10-19 15:01:02 回复

        请问一下地址是哪里?没有找到

        1. fghrsh 2020-10-20 00:48:09 回复

          https://github.com/fghrsh/live2d_demo

      1. gaoyucheng 2020-08-11 09:58:21 回复

        就是这个live2d_settings['waifuMinWidth']= '768px'; ?我没有改还是这个默认的,还是会卡,但好像有一部分浏览器不会

      1. gaoyucheng 2020-08-10 22:26:30 回复

        加载玩live2d手机端滑动很卡,有时还好未响应,只有手机端会出现

        1. fghrsh 2020-08-10 22:30:04 回复

          中低端设备会出现这个情况 .. 所以一般都是禁用手机端显示的 ...

  1. gaoyucheng 2020-08-10 13:39:40 回复

    有API的开源下载地址吗?

    1. fghrsh 2020-08-10 22:21:10 回复

      见 打包下载 部分 ...

      1. gaoyucheng 2020-08-10 22:24:53 回复

        Sorry,没看到

  1. panedioic 2020-08-06 16:36:08 回复

    大佬你好,我试着写了个切换模型不用后台api的版本,大佬你要不要看一下
    https://github.com/panedioic/live2d_demo_without_api

    1. fghrsh 2020-08-10 22:26:35 回复

      已添加到 其他插件 部分 ~

  1. J 2020-08-06 01:58:38 回复

    博主会考虑支持新版moc3吗,https://github.com/HCLonely/Live2dV3

  1. koyamisa 2020-07-30 10:21:35 回复

    大佬,使用自己建立的API?我改了很多都是你的API

  1. icesvalley 2020-07-06 17:41:33 回复

    大佬,额这个博客页面上的这个live2d模型在哪,请问?github的模型并不是这个也不清楚具体要怎么弄

  1. 空念 2020-06-12 05:25:51 回复

    和viewport meta 标签冲突怎么办……太难了,差点暴毙。

  1. 姚姚姚 2020-06-07 14:46:48 回复

    大佬,那个模型今天出不来了咋办,从今天开始断断续续,有时候出来,有时候又出不来,但是对话框以及模型右边的几个按钮,除了切换还有换装不能用外,其他都能用

  1. jojo 2020-05-21 18:31:05 回复

    Access to XMLHttpRequest at 'https://wx.oldoldthings.cn/api/model/Potion-Maker/Pio/model.moc' from origin 'xxx.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. moc文件的跨域怎么解决。谢谢博主

    1. 两年之期 2020-05-29 11:28:47 回复

      解决了吗?我也是同样的问题,把谷歌浏览器设置成允许跨域就行了,但这个不是最终解决办法!

      1. fghrsh 2020-06-01 22:13:48 回复

        需要在 web server 上设置跨域 header ...

        1. tokyohost 2021-01-28 15:59:07 回复

          nginx或者apache里面写就行

  1. 林雪飞 2020-05-21 14:36:05 回复

    博主,那个播放器是如何实现的吖,能不能出个播放器的demo吖

  1. helloworld 2020-05-21 08:59:42 回复

    博主 有时间出个自己搭建api的教程呗 实在是不知道如何搭建。。。。百度也找不到教程

    1. fghrsh 2020-05-21 09:00:58 回复

      API 是开箱即用的 .. 也就是解压就能用,所以你需要找的是 搭建 PHP 环境的教程,例如 LNMP ...

  1. xiaobencong 2020-05-18 03:48:13 回复

    大佬大佬,这个live2d位置怎么移动呀

    1. fghrsh 2020-05-19 12:01:05 回复

      实现拖拽效果的话,这边要引入 JQuery UI 库

      1. 迷迭帕里桑 2020-05-20 23:12:54 回复

        大佬就是我用了你这之前一个月都好好得,包括昨天,今天看板娘模型就出不来l,但是对话和功能还在,为啥啊,帮帮孩子把

        1. fghrsh 2020-05-20 23:15:33 回复

          之前受到攻击刷了 3k+ 流量费,导致不稳定 ... 目前 API 由于请求数过大,服务端承受不住了,大概过 2、3 天加节点

  1. 祸灵 2020-05-15 22:31:08 回复

    请问部分动作点击后报错应该怎么解决?
    Uncaught TypeError: Cannot read property '0' of undefined
    at o.r.hitTestSimpleCustom (live2d.js:1)
    at o.hitTestCustom (live2d.js:1)
    at o.tapEvent (live2d.js:1)
    at p (live2d.js:1)
    at g (live2d.js:1)

  1. SF_FAN 2020-05-15 15:45:51 回复

    大佬你好,请问这个默认模型材质id在哪里能找到啊,F12里找了半天没找到。

    1. fghrsh 2020-05-19 11:59:09 回复

      可以看 API 请求参数:/live2d/get/?id=1-27,这里 模型 ID 是 1,材质 ID 是 27 ...

  1. 无言 2020-05-07 16:44:20 回复

    我自己弄的模型导出来后,在web上显示头和脚都没了,大佬知道怎么回事吗

    1. fghrsh 2020-05-08 14:43:50 回复

      是不是用了 moc3 模型 ...

  1. 小白丶 2020-04-28 15:53:41 回复

    博主博主,想知道这个音乐播放插件怎么弄得。十分感谢

    1. fghrsh 2020-05-08 14:44:47 回复

      是这个? https://player.lmih.cn/ ...

      1. 续约半夏 2020-07-27 17:02:53 回复

        博主这个音乐播放软件怎么搞的

  1. 111 2020-04-10 03:37:12 回复

    谢谢博主
    https://qlwzrz.love
    我做了静态文件都放腾讯cos了,但是切换速度还是比博主慢?请问博主用的是什么加速

    1. fghrsh 2020-04-12 22:06:31 回复

      唔 .. 缓存了速度就上去了,这边看挺快的,我用的是 阿里云 CDN

  1. wuyan 2020-04-03 15:31:37 回复

    我想问一下live2d打包是用什么打的啊

  1. wuyan 2020-04-03 15:18:16 回复

    找到了,谢谢大佬

  1. 昔日织 2020-03-31 14:02:56 回复

    大佬请问这live2d.js好像不能识别罪行的moc3格式的文件,现在最新的,甚至游戏里面的live2d文件都是live2d3.x制作的。我想弄游戏里的live2d,但整不进网站里面。大佬有建议不。。

    1. 经此而已 2020-04-02 21:15:53 回复

      找到了https://blog.hclonely.com/posts/8a7f7919/#使用方法 这位大佬弄了一个支持moc3的。真实太厉害了

  1. Nsking 2020-03-24 23:23:05 回复

    撸主,你www.fczbl.vip证书到期了

    1. fghrsh 2020-03-28 07:24:46 回复

      这个不是我的域名 ... 而且迁移到 https://moedog.org/ 了 ...

  1. 90726228 2020-03-21 16:04:08 回复

    想问一下自建的api不能get到图片怎么办?https://ddns.10086.fund:23350/live2d_api/

  1. k字开头的 2020-03-21 10:25:24 回复

    每天都来瞅瞅看板娘

  1. DipperGamefourm 2020-03-17 09:30:54 回复

    好的,但是具体怎么做,我的discuz太复杂,您说的 统计代码 有好几个,不清楚是哪个的,而且autoload.js怎么添加进discuz,这个是不能自动添加的,需要我手动添加才能加载的。万分感谢大佬!请求你的教程。

  1. DipperGamefourm 2020-03-16 13:58:38 回复

    大佬你好,我想在discuz上面添加,我的好朋友说理论上是可以的,但是具体怎么做不知道。我有php(discuz是需要php运行的)。

    1. fghrsh 2020-03-17 04:06:40 回复

      可以的,参考一下 demo,推荐 autoload.js 的加载方法,然后放到 统计代码 里就可以了 ...

      1. wuyan 2020-04-03 15:12:22 回复

        请问一下live2d的源码在哪里啊,未压缩的

        1. fghrsh 2020-04-03 15:13:32 回复

          文章里都有 github 地址的 ...

  1. zrz 2020-03-13 23:46:34 回复

    我弄了自己api,手机其他浏览器可以访问,微信里边的浏览器加载了老是显示不出来,不知道啥原因

  1. zrz 2020-03-12 20:41:39 回复

    没有提示u怎么回事

    1. zrz 2020-03-12 20:42:37 回复

      就那些说话的字显示不出来

  1. lin 2020-02-22 11:38:53 回复

    我下载了本地素菜,但改了路径模板就不能用是怎么解决的。我看到之前的留言板也有类似的问题

  1. 呆萌萌 2020-02-21 00:26:02 回复

    dalao我这里搜集了一大片live2d模型和文档,可不可以一起融合,看您的博客也可能是z博客的一起开发个这个插件啊,我可以帮助改代码啥的,我多多少少会点

    1. fghrsh 2020-02-22 00:08:04 回复

      这边没继续添加模型主要是版权问题 ... 需要的话可以自建 API(这边全开源的 ...

      1. 呆萌萌 2020-02-22 00:12:04 回复

        版权问题所以没有添加的吗?我是想把所有的模型都加到一起做个大的,毕竟互联网上说是免费共享的,可不可以教我一些教程和建立api的方法

        1. fghrsh 2020-02-22 00:14:44 回复

          我这边 API 访问量很大 ... 搭建的话可以加下我 QQ

  1. yang 2020-02-17 22:09:19 回复

    请问waifu-tips.json不能加载是怎么一回事?我好崩溃呀,其他js或者css加载都是正常的呀

    1. fghrsh 2020-02-18 00:54:29 回复

      可以 QQ 或者 TG 找我看看 ...

      1. 呆萌萌 2020-02-22 00:17:28 回复

        您说下qq吧我先加您,之后明天讨论可以把,时候不早了,该休息了

        1. fghrsh 2020-02-22 00:20:01 回复

          关于页有的 ..

      1. yang 2020-02-18 11:59:27 回复

        ok 大佬

  1. djo 2020-02-15 01:45:16 回复

    We hope that you will update to complete it with the v 3 .moc3

  1. yamika 2020-02-12 23:42:25 回复

    dalao,想问下现在有能支持v3版l2d模型的api吗,好多游戏提取出来的都是v3的,直接用大佬的js没法解析

  1. TC 2020-02-10 15:57:24 回复

    想要使用modeljson以外的模型怎么办呀

  1. sidian.live 2020-02-05 13:03:05 回复

    很不错, 感谢!!!

  1. zhidianzhiguang 2019-12-27 15:49:26 回复

    live2D能发到邮箱吗,github下不下来,邮箱[email protected]

  1. mshadow 2019-12-13 13:13:20 回复

    大佬你的live2d图片是不是压缩过了啊,加载的好快,我看了单张都是几k十几k的,我这里一张都是50多k这种,速度慢了好多

  1. 神一样的我 2019-12-07 23:41:18 回复

    tia酱好像会出现双睫毛

  1. 仙女萝拉 2019-11-25 18:53:10 回复

    大佬上了live2d移动端会卡死咋回事啊PC端好好的

  1. MoeWang 2019-11-18 17:07:34 回复

    最近我网站的live2d在谷歌浏览器不加载了,必须调整浏览器窗口大小之后方能正常显示...Edge浏览器就正常...很难受

  1. 小蛤 2019-11-12 18:18:16 回复

    大佬有自建API的方法么。全局修改了本地的API地址,网页上实际显示还是从源API获取

  1. hktx 2019-11-08 14:55:04 回复

    您好,兄弟,可以加下您的QQ,稍微指导下么,非常感谢!

    1. fghrsh 2019-11-10 03:33:54 回复

      可以的 .. 见 博客 - 关于页 ...

      1. 1666464238 2020-02-22 05:53:09 回复

        我下载了本地素菜,但改了路径模板就不能用是怎么解决的。我看到之前的留言板也有类似的问题

  1. 11 2019-10-26 21:14:31 回复

    dalao,api又断链了

    1. fghrsh 2019-10-27 01:23:35 回复

      咦?这边好像挺正常的...

  1. Mr.Zzz 2019-10-19 15:39:52 回复

    博主 怎么在本地弄啊

  1. fghrsh是大佬 2019-10-19 14:08:58 回复

    用html打得开

  1. hyq 2019-10-19 12:03:52 回复

    切换模型的插件zip解压不了?什么鬼

  1. hyq 2019-10-19 11:51:27 回复

    谷歌浏览器会出模型,ie不会

    1. fghrsh 2019-10-27 01:21:59 回复

      不兼容旧浏览器...

  1. hyq 2019-10-19 11:47:27 回复

    我去,怎么还有黄色,,被同事误会了

  1. hyq 2019-10-19 11:42:15 回复

    大佬牛掰,怎么关注

  1. wx 2019-10-12 19:42:37 回复

    大神好,这个开源吗

    1. fghrsh 2019-10-14 09:29:25 回复

      见文章 - 打包下载 ...

  1. misbehave 2019-10-11 16:44:05 回复

    大佬,在应用中遇到了一些问题,在locahost环境下测试引用正常,放到web中之后不显示文字框。。。。 PHP版本5.2。
    而且还有一个很关键的问题是我把API上传到web目录后,修改了['modelAPI'] 无效,加载不出来,无奈只能引用你的API。
    页面地址是http://gta5-addon.com/ (右下角)

    1. misbehave 2019-10-12 16:14:10 回复

      第一个问题解决了,是因为我的空间没有开始.json格式的支持,但是修改API的问题依然没有解决,从gethub上下载下来了API 挪到自己网站中改名为live2d-api 然后按照上面教程修改了['modelAPI'] 不能用。

      1. fghrsh 2019-10-14 23:38:14 回复

        唔.. QQ 找我看看?

  1. 90726228 2019-10-08 12:54:07 回复

    https://live2d.fghrsh.net/api,这个上面的文件我已经从gethub上面嫖下来了,但是放到本地无法调用,想问一下怎么办?

    1. fghrsh 2019-10-11 01:08:48 回复

      运行 API 需要 PHP 环境 ..

  1. cj 2019-10-04 17:39:52 回复

    这个音乐组件叫啥呢

    1. fghrsh 2019-10-11 01:10:37 回复

      明月浩空播放器?

  1. 666666 2019-09-28 22:46:03 回复

    歌很不错~

  1. 灿灿 2019-09-19 21:04:10 回复

    大佬,我想要用python搭建自己的api,能给我个接口文档吗?

    1. fghrsh 2019-09-23 20:07:35 回复

      这个.. 浏览器 F12 可以看到返回的内容... (不清楚的话可以 QQ / TG 找我

      1. asd 2019-09-24 17:09:26 回复

        这个雄安白可以搞吗

  1. 周末 2019-09-18 10:51:33 回复

    牛逼铁子

  1. 你好啊 2019-09-10 19:21:21 回复

    怎么把鼠标经过加的那 1px,去掉源码太多了

    1. 灿灿 2019-09-19 21:07:29 回复

      我把waifu.css中的这个样式注释掉就没有鼠标经过颤动一下了,只是不知道有什么副作用。
      .waifu:hover {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      }

      1. fghrsh 2019-09-23 20:06:14 回复

        没有.. 就只是一个效果

  1. Rarin 2019-08-30 20:50:56 回复

    谢谢博主的教程!

  1. 不想长大 2019-08-28 18:54:19 回复

    大佬,那些拍照换装的图标怎么弄的

  1. 小丁丁 2019-08-23 12:02:24 回复

    我把整个 model 放在了 CDN,api 部分已经做了转换层,返回数据大致如下:
    ```json
    {
    "version":"1.0.0",
    "model":"https://cdn.com/model/Potion-Maker/Pio/model.moc",
    "textures":[
    "https://cdn.com/model/Potion-Maker/Pio/textures/default-costume.png"
    ]
    }
    ```
    。那么 JS 文件如何修改
    现在的情况是:console 查看结果:VM760:3994 GET https://l2d.lnmpa.top/api/get/https://cdn.com/model/ShizukuTalk/shizuku-48/model.moc 404

    1. 小丁丁 2019-08-29 13:58:44 回复

      苦苦读了一晚上live2d.js,在约 3985 行处添加判断:
      ```javascript
      // 截取静态 CDN 资源 URI
      if (t.indexOf('/l2d/model/') != -1) {
      t = t.substr(30)
      }
      ```
      要截取的字符串开始位置及要匹配的CDN url 地址 请【自行替换】

    1. 小丁丁 2019-08-23 12:03:42 回复

      就是请求的 url 为什么不是后端 api 返回的 url,如果可以要怎么修改,在下 js 小菜鸡,求解

      1. fghrsh 2019-10-14 23:40:04 回复

        这个可以用 nginx rewrite 到 CDN

      1. 小丁丁 2019-08-26 11:26:21 回复

        Hello?

        1. 小丁丁 2019-08-26 11:26:40 回复

          Anyone There?

  1. 小菜鸡 2019-08-22 12:46:11 回复

    哇。挺好看的

    1. 小菜鸡 2019-08-22 12:46:59 回复

      确实挺萌的

  1. 木子 2019-08-17 17:09:59 回复

    手机端不显示啊

    1. fghrsh 2019-10-14 23:44:26 回复

      默认手机端不显示,中端手机容易卡顿..

      1. 遗迹探险者 2020-05-24 15:49:40 回复

      1. 遗迹探险者 2020-05-22 21:55:50 回复

        有什么办法才能让手机显示呢?😥

        1. 634 2021-10-07 20:57:15 回复

          改代码

  1. shajjl 2019-08-14 21:40:07 回复

    这是什么情况QWQ
    Failed to load resource: the server responded with a status of 404 ()

发表我的评论

Hi,您需要填写昵称和邮箱!

  • 必填项