舰R百科是靠无数志愿编辑者持续地建设更新完善的。编辑非常简单，无需代码知识，请勇于更新页面！
编辑入门 | 资助百科 | 留言讨论页 | 微博@舰R百科 | 百科编辑讨论Q群：366818861

微件:Live2d：修订间差异

来自舰R百科
跳转到导航 跳转到搜索
以互动方式浏览历史
←上一编辑
可视化wikitext
无编辑摘要
无编辑摘要
 
（未显示同一用户的18个中间版本）
第1行： 第1行：
<noinclude>
<noinclude>
WIP
WIP
{{#widget:live2d}}
{{live2d|index=248_1}}
</noinclude><includeonly>
</noinclude><includeonly>
<canvas id='live2d' width='640', height='768' style='background-image:url(/wg_img/ccbResources/user_detail_bg2.png);display:none;'></canvas>
<button id='live2d-button' onclick='live2d_main()'>点击显示</button>
<button onclick='live2d_main()'>Live2D</button>
<script src='https://zjsnrwiki.github.io/live2d/src/live2d.min.js'></script>
<script src='https://cruiseliu.github.io/live2d-demo/src/live2d.min.js'></script>
<script src='https://zjsnrwiki.github.io/live2d/src/Live2DFramework.js'></script>
<script src='https://cruiseliu.github.io/live2d-demo/src/Live2DFramework.js'></script>
<script src='https://zjsnrwiki.github.io/live2d/src/MatrixStack.js'></script>
<script src='https://cruiseliu.github.io/live2d-demo/src/MatrixStack.js'></script>
<script src='https://zjsnrwiki.github.io/live2d/src/ModelSettingJson.js'></script>
<script src='https://cruiseliu.github.io/live2d-demo/src/ModelSettingJson.js'></script>
<script src='https://zjsnrwiki.github.io/live2d/src/PlatformManager.js'></script>
<script src='https://cruiseliu.github.io/live2d-demo/src/PlatformManager.js'></script>
<script src='https://zjsnrwiki.github.io/live2d/src/LAppModel.js'></script>
<script src='https://cruiseliu.github.io/live2d-demo/src/LAppModel.js'></script>
<script>
<script>
var model_location = '/wg_img/ccbResources/live2D/248_1/model.model.json';
var l2d_index = "<!--{$index|escape:'quotes'}-->";
var canvas = null;
var l2d_url = '/wg_img/ccbResources/live2D/' + l2d_index + '/model.model.json';
var ctx = null;
 
var model = null;
var l2d_canvas = null;
var dragging = false;
var l2d_ctx = null;
var dragMgr = null;
var l2d_model = null;
var l2d_dragging = false;
var l2d_dragMgr = null;
var l2d_curTrigger = null;
var l2d_strokeStart = null;
var l2d_dragFromY = null;
var l2d_config = null;
var l2d_triggers = [ ];
 
var l2d_eyeY = 0.9;


function live2d_main()
function live2d_main()
{
{
    // I don't know how to calculate eyes' coordinate, so hard coded here
    if (l2d_index == '59_1')
        l2d_eyeY = 0.945;
    else if (l2d_index == '248_1')
        l2d_eyeY = 0.885;
    l2d_canvas = document.getElementById('live2d-canvas');
    var bg = document.getElementById('live2d-background').style;
    var vw = document.documentElement.clientWidth;
    if (l2d_canvas.width > vw * 0.9) {
        l2d_canvas.height *= vw * 0.9 / l2d_canvas.width;
        l2d_canvas.width = vw * 0.9;
        bg.height = l2d_canvas.height + 'px';
        bg.width = l2d_canvas.width + 'px';
    }
    document.getElementById('live2d-container').style.display = 'block';
    document.getElementById('live2d-button').style.display = 'none';
    var time = new Date().getHours();
    if (time < 6)
        bg.backgroundImage = 'url(/wg_img/ccbResources/user_detail_bg1.png)';
    else if (time < 12)
        bg.backgroundImage = 'url(/wg_img/ccbResources/user_detail_bg2.png)';
    else if (time < 18)
        bg.backgroundImage = 'url(/wg_img/ccbResources/user_detail_bg3.png)';
    else
        bg.backgroundImage = 'url(/wg_img/ccbResources/user_detail_bg4.png)';
     Live2D.init();
     Live2D.init();
     Live2DFramework.setPlatformManager(new PlatformManager);
     Live2DFramework.setPlatformManager(new PlatformManager);


     model = new LAppModel();
     l2d_model = new LAppModel();
     dragMgr = new L2DTargetPoint();
     l2d_dragMgr = new L2DTargetPoint();


    canvas = document.getElementById('live2d');
    canvas.style.display = 'block';
     addCanvasListeners();
     addCanvasListeners();


     var ratio = canvas.height / canvas.width;
     var ratio = l2d_canvas.height / l2d_canvas.width;


     this.viewMatrix = new L2DViewMatrix();
     this.viewMatrix = new L2DViewMatrix();
第41行： 第77行：


     this.deviceToScreen = new L2DMatrix44();
     this.deviceToScreen = new L2DMatrix44();
     this.deviceToScreen.multTranslate(-canvas.width / 2.0, -canvas.height / 2.0);
     this.deviceToScreen.multTranslate(-l2d_canvas.width / 2.0, -l2d_canvas.height / 2.0);
     this.deviceToScreen.multScale(2 / canvas.width, -2 / canvas.width);
     this.deviceToScreen.multScale(2 / l2d_canvas.width, -2 / l2d_canvas.width);


     ctx = canvas.getContext("webgl", {premultipliedAlpha : true});
     l2d_ctx = l2d_canvas.getContext("webgl", {premultipliedAlpha : true});
     Live2D.setGL(ctx);
     Live2D.setGL(l2d_ctx);
     ctx.clearColor(0.0, 0.0, 0.0, 0.0);
     l2d_ctx.clearColor(0.0, 0.0, 0.0, 0.0);


     model.load(ctx, model_location);
     l2d_model.load(l2d_ctx, l2d_url);


     draw();
     draw();
第55行： 第91行：
function addCanvasListeners()
function addCanvasListeners()
{
{
     canvas.addEventListener("click", mouseEvent, false);
     l2d_canvas.addEventListener("click", mouseEvent, false);
     canvas.addEventListener("mousedown", mouseEvent, false);
     l2d_canvas.addEventListener("mousedown", mouseEvent, false);
     canvas.addEventListener("mousemove", mouseEvent, false);
     l2d_canvas.addEventListener("mousemove", mouseEvent, false);
     canvas.addEventListener("mouseup", mouseEvent, false);
     l2d_canvas.addEventListener("mouseup", mouseEvent, false);
     canvas.addEventListener("mouseout", mouseEvent, false);
     l2d_canvas.addEventListener("mouseout", mouseEvent, false);
     canvas.addEventListener("contextmenu", mouseEvent, false);
     l2d_canvas.addEventListener("contextmenu", mouseEvent, false);
     canvas.addEventListener("touchstart", touchEvent, false);
     l2d_canvas.addEventListener("touchstart", touchEvent, false);
     canvas.addEventListener("touchend", touchEvent, false);
     l2d_canvas.addEventListener("touchend", touchEvent, false);
     canvas.addEventListener("touchmove", touchEvent, false);
     l2d_canvas.addEventListener("touchmove", touchEvent, false);
}
 
function initTriggers()
{
    for (var hitArea of l2d_config.hit_areas)
        for (var triggerData of l2d_config.trigger)
            if (hitArea.id == triggerData.id) {
                var trigger = { area: hitArea.name, gesture: triggerData.actionType };
                trigger.expressions = [ ];
                for (var action of triggerData.action) {
                    if (l2d_config.motions[action] != null) {
                        trigger.motion = action;
                    } else {
                        for (var exp of l2d_config.expressions)
                            if (exp.name == action)
                                trigger.expressions.push(exp.name);
                    }
                }
                trigger.dialogue = triggerData.dialogue;
                l2d_triggers.push(trigger);
            }
    l2d_config = null;
}
}


function draw()
function draw()
{
{
    if (l2d_config != null)
        initTriggers();
     MatrixStack.reset();
     MatrixStack.reset();
     MatrixStack.loadIdentity();
     MatrixStack.loadIdentity();


     dragMgr.update();  
     l2d_dragMgr.update();  
     model.setDrag(dragMgr.getX(), dragMgr.getY());
     l2d_model.setDrag(l2d_dragMgr.getX(), l2d_dragMgr.getY());


     ctx.clear(ctx.COLOR_BUFFER_BIT);
     l2d_ctx.clear(l2d_ctx.COLOR_BUFFER_BIT);


     MatrixStack.multMatrix(projMatrix.getArray());
     MatrixStack.multMatrix(projMatrix.getArray());
第80行： 第141行：
     MatrixStack.push();
     MatrixStack.push();


     if (model.initialized && !model.updating) {
     if (l2d_model.initialized && !l2d_model.updating) {
         model.update();
         l2d_model.update();
         model.draw(ctx);
         l2d_model.draw(l2d_ctx);
     }
     }


     MatrixStack.pop();
     MatrixStack.pop();


     window.requestAnimationFrame(draw ,canvas);
     window.requestAnimationFrame(draw ,l2d_canvas);
}
}


function modelTurnHead(event)
function activeTrigger(trigger)
{
    l2d_model.startRandomMotion(trigger.motion, trigger.area == 'head' ? 2 : 3);
    if (trigger.expressions.length > 0) {
        l2d_model.setExpression(trigger.expressions[0]);
        setTimeout(function() { l2d_model.setExpression(trigger.expressions[1]); }, 200);
    }
}
 
function mouseDown(event)
{
{
     var rect = event.target.getBoundingClientRect();
     var rect = event.target.getBoundingClientRect();
第96行： 第166行：
     var y = transformViewY(event.clientY - rect.top);
     var y = transformViewY(event.clientY - rect.top);


     dragging = true;
     l2d_dragMgr.setPoint(x, y - l2d_eyeY);
    dragMgr.setPoint(x, y);  
    l2d_dragging = true;


     if (model.hitTest("head", x, y)) // FIXME: stroke
     l2d_dragging = true;
        model.startRandomMotion("smile", PRIORITY_NORMAL);
    for (var trigger of l2d_triggers) {
    else if (model.hitTest("obai", x, y))
        if (l2d_model.hitTest(trigger.area, x * 1.5, y)) {
        model.startRandomMotion("suprise", PRIORITY_FORCE);
            l2d_curTrigger = trigger;
    else if (model.hitTest("skirt", x, y)) { // FIXME: up
            if (trigger.gesture == 'click') {
        model.setExpression("skirt_up");
                activeTrigger(trigger);
        model.startRandomMotion("shy");
            } if (trigger.gesture == 'stroke') {
        setTimeout(function() {
                l2d_strokeStart = Date.now();
             model.setExpression("skirt_down");
            } else if (trigger.gesture == 'up') {
         }, 200);
                l2d_dragFromY = y;
             }
         }
     }
     }
}
}


function followPointer(event)
function mouseMove(event)
{
{
     var rect = event.target.getBoundingClientRect();
     var rect = event.target.getBoundingClientRect();
第118行： 第190行：
     var y = transformViewY(event.clientY - rect.top);
     var y = transformViewY(event.clientY - rect.top);


     if (dragging)
     if (l2d_dragging) {
         dragMgr.setPoint(x, y);
         l2d_dragMgr.setPoint(x, y - l2d_eyeY);
 
        if (l2d_strokeStart != null) {
            if (!l2d_model.hitTest(l2d_curTrigger.area, x * 1.5, y))
                l2d_strokeStart = null;
            else
                if (Date.now() - l2d_strokeStart > 3000)
                    activeTrigger(l2d_curTrigger);
        }
 
        if (l2d_dragFromY != null && y > l2d_dragFromY
                && !l2d_model.hitTest(l2d_curTrigger.area, x * 1.5, y)) {
            activeTrigger(l2d_curTrigger);
            l2d_dragFromY = null;
        }
    }
}
}


function lookFront()
function mouseUp()
{
{
     dragging = false;
     l2d_dragMgr.setPoint(0, 0);
    dragMgr.setPoint(0, 0);
    l2d_dragging = false;
    l2d_curTrigger = null;
    l2d_strokeStart = null;
    l2d_dragFromY = null;
}
}


第133行： 第223行：
     if (e.type == "mousedown") {
     if (e.type == "mousedown") {
         if("button" in e && e.button != 0) return;
         if("button" in e && e.button != 0) return;
         modelTurnHead(e);
         mouseDown(e);
     } else if (e.type == "mousemove") {
     } else if (e.type == "mousemove") {
         followPointer(e);
         mouseMove(e);
     } else if (e.type == "mouseup") {
     } else if (e.type == "mouseup") {
         if("button" in e && e.button != 0) return;
         if("button" in e && e.button != 0) return;
         lookFront();
         mouseUp();
     } else if (e.type == "mouseout") {
     } else if (e.type == "mouseout") {
         lookFront();
         mouseUp();
     }
     }
}
}
第150行： 第240行：
     if (e.type == "touchstart") {
     if (e.type == "touchstart") {
         if (e.touches.length == 1)
         if (e.touches.length == 1)
             modelTurnHead(touch);
             mouseDown(touch);
     } else if (e.type == "touchmove") {
     } else if (e.type == "touchmove") {
         followPointer(touch);
         mouseMove(touch);
     } else if (e.type == "touchend") {
     } else if (e.type == "touchend") {
         lookFront();
         mouseUp();
     }
     }
}
}

2016年10月8日 (六) 00:27的最新版本

WIP


检索自“https://www.zjsnrwiki.com/index.php?title=微件:Live2d&oldid=18327”