微件:Live2d:修订间差异
跳转到导航
跳转到搜索
无编辑摘要 |
无编辑摘要 |
||
第1行: | 第1行: | ||
<noinclude> | <noinclude> | ||
WIP | WIP | ||
<div id='live2d-container' style='display:none;'> | |||
<div id='live2d-background' style='display:inline-block;'> | |||
<canvas id='live2d-canvas' width='640' height='768'></canvas> | |||
</div></div> | |||
{{#widget:live2d|index=248_1}} | {{#widget:live2d|index=248_1}} | ||
</noinclude><includeonly> | </noinclude><includeonly> | ||
< | <button id='live2d-button' onclick='live2d_main()'>Live2D</button> | ||
<script src='https://cruiseliu.github.io/live2d-demo/src/live2d.min.js'></script> | <script src='https://cruiseliu.github.io/live2d-demo/src/live2d.min.js'></script> | ||
<script src='https://cruiseliu.github.io/live2d-demo/src/Live2DFramework.js'></script> | <script src='https://cruiseliu.github.io/live2d-demo/src/Live2DFramework.js'></script> | ||
第12行: | 第15行: | ||
<script src='https://cruiseliu.github.io/live2d-demo/src/LAppModel.js'></script> | <script src='https://cruiseliu.github.io/live2d-demo/src/LAppModel.js'></script> | ||
<script> | <script> | ||
var | var l2d_url = "/wg_img/ccbResources/live2D/<!--{$index|escape:'quotes'}-->/model.model.json"; | ||
function | var l2d_canvas = null; | ||
var l2d_ctx = 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 = [ ]; | |||
function l2d_main() | |||
{ | { | ||
document.getElementById('live2d-container').style.display = 'block'; | |||
document.getElementById('live2d-button').style.display = 'none'; | |||
var bg = document.getElementById('live2d-background').style; | |||
var time = new Date().getHours(); | |||
console.log(time); | |||
if (time < 6) | |||
bg.backgroundImage = 'url(user_detail_bg1.png)'; | |||
else if (time < 12) | |||
bg.backgroundImage = 'url(user_detail_bg2.png)'; | |||
else if (time < 18) | |||
bg.backgroundImage = 'url(user_detail_bg3.png)'; | |||
else | |||
bg.backgroundImage = 'url(user_detail_bg4.png)'; | |||
l2d_canvas = document.getElementById('live2d-canvas'); | |||
Live2D.init(); | Live2D.init(); | ||
Live2DFramework.setPlatformManager(new PlatformManager); | Live2DFramework.setPlatformManager(new PlatformManager); | ||
l2d_model = new LAppModel(); | |||
l2d_dragMgr = new L2DTargetPoint(); | |||
addCanvasListeners(); | addCanvasListeners(); | ||
var ratio = | var ratio = l2d_canvas.height / l2d_canvas.width; | ||
this.viewMatrix = new L2DViewMatrix(); | this.viewMatrix = new L2DViewMatrix(); | ||
第41行: | 第64行: | ||
this.deviceToScreen = new L2DMatrix44(); | this.deviceToScreen = new L2DMatrix44(); | ||
this.deviceToScreen.multTranslate(- | this.deviceToScreen.multTranslate(-l2d_canvas.width / 2.0, -l2d_canvas.height / 2.0); | ||
this.deviceToScreen.multScale(2 / | this.deviceToScreen.multScale(2 / l2d_canvas.width, -2 / l2d_canvas.width); | ||
l2d_ctx = l2d_canvas.getContext("webgl", {premultipliedAlpha : true}); | |||
Live2D.setGL( | Live2D.setGL(l2d_ctx); | ||
l2d_ctx.clearColor(0.0, 0.0, 0.0, 0.0); | |||
l2d_model.load(l2d_ctx, l2d_url); | |||
draw(); | draw(); | ||
第55行: | 第78行: | ||
function addCanvasListeners() | function addCanvasListeners() | ||
{ | { | ||
l2d_canvas.addEventListener("click", mouseEvent, false); | |||
l2d_canvas.addEventListener("mousedown", mouseEvent, false); | |||
l2d_canvas.addEventListener("mousemove", mouseEvent, false); | |||
l2d_canvas.addEventListener("mouseup", mouseEvent, false); | |||
l2d_canvas.addEventListener("mouseout", mouseEvent, false); | |||
l2d_canvas.addEventListener("contextmenu", mouseEvent, false); | |||
l2d_canvas.addEventListener("touchstart", touchEvent, false); | |||
l2d_canvas.addEventListener("touchend", touchEvent, false); | |||
l2d_canvas.addEventListener("touchmove", touchEvent, false); | |||
} | |||
function initTriggers() | |||
{ | |||
for (let hitArea of l2d_config.hit_areas) | |||
for (let triggerData of l2d_config.trigger) | |||
if (hitArea.id == triggerData.id) { | |||
let trigger = { area: hitArea.name, gesture: triggerData.actionType }; | |||
trigger.expressions = [ ]; | |||
for (let action of triggerData.action) { | |||
if (l2d_config.motions[action] != null) { | |||
trigger.motion = action; | |||
} else { | |||
for (let 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(); | ||
l2d_dragMgr.update(); | |||
l2d_model.setDrag(l2d_dragMgr.getX(), l2d_dragMgr.getY()); | |||
l2d_ctx.clear(l2d_ctx.COLOR_BUFFER_BIT); | |||
MatrixStack.multMatrix(projMatrix.getArray()); | MatrixStack.multMatrix(projMatrix.getArray()); | ||
第80行: | 第128行: | ||
MatrixStack.push(); | MatrixStack.push(); | ||
if ( | if (l2d_model.initialized && !l2d_model.updating) { | ||
l2d_model.update(); | |||
l2d_model.draw(l2d_ctx); | |||
} | } | ||
MatrixStack.pop(); | MatrixStack.pop(); | ||
window.requestAnimationFrame(draw , | window.requestAnimationFrame(draw ,l2d_canvas); | ||
} | |||
function activeTrigger(trigger, isStroke) | |||
{ | |||
l2d_model.startMotion(trigger.motion, isStroke ? 1 : 0, 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 | function mouseDown(event) | ||
{ | { | ||
var rect = event.target.getBoundingClientRect(); | var rect = event.target.getBoundingClientRect(); | ||
第96行: | 第153行: | ||
var y = transformViewY(event.clientY - rect.top); | var y = transformViewY(event.clientY - rect.top); | ||
l2d_dragMgr.setPoint(x, y); | |||
l2d_dragging = true; | |||
if ( | l2d_dragging = true; | ||
for (let trigger of l2d_triggers) { | |||
if (l2d_model.hitTest(trigger.area, x * 1.5, y)) { | |||
l2d_curTrigger = trigger; | |||
if (trigger.gesture == 'click') { | |||
activeTrigger(trigger); | |||
} if (trigger.gesture == 'stroke') { | |||
l2d_strokeStart = Date.now(); | |||
activeTrigger(trigger); | |||
} | } else if (trigger.gesture == 'up') { | ||
l2d_dragFromY = y; | |||
} | |||
} | |||
} | } | ||
} | } | ||
function | function mouseMove(event) | ||
{ | { | ||
var rect = event.target.getBoundingClientRect(); | var rect = event.target.getBoundingClientRect(); | ||
第118行: | 第178行: | ||
var y = transformViewY(event.clientY - rect.top); | var y = transformViewY(event.clientY - rect.top); | ||
if ( | if (l2d_dragging) { | ||
l2d_dragMgr.setPoint(x, y); | |||
if (l2d_strokeStart != null) { | |||
if (!l2d_model.hitTest(l2d_curTrigger.area, x * 1.5, y)) | |||
l2d_strokeStart = null; | |||
else | |||
if (Date.now() - l2d_strokeStart > 8000) | |||
activeTrigger(l2d_curTrigger, true); | |||
} | |||
if (l2d_dragFromY != null && y > l2d_dragFromY | |||
&& !l2d_model.hitTest(l2d_curTrigger.area, x * 1.5, y)) { | |||
activeTrigger(l2d_curTrigger); | |||
l2d_dragFromY = null; | |||
} | |||
} | |||
} | } | ||
function | function mouseUp() | ||
{ | { | ||
l2d_dragMgr.setPoint(0, 0); | |||
l2d_dragging = false; | |||
l2d_curTrigger = null; | |||
l2d_strokeStart = null; | |||
l2d_dragFromY = null; | |||
} | } | ||
第133行: | 第211行: | ||
if (e.type == "mousedown") { | if (e.type == "mousedown") { | ||
if("button" in e && e.button != 0) return; | if("button" in e && e.button != 0) return; | ||
mouseDown(e); | |||
} else if (e.type == "mousemove") { | } else if (e.type == "mousemove") { | ||
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; | ||
mouseUp(); | |||
} else if (e.type == "mouseout") { | } else if (e.type == "mouseout") { | ||
mouseUp(); | |||
} | } | ||
} | } | ||
第150行: | 第228行: | ||
if (e.type == "touchstart") { | if (e.type == "touchstart") { | ||
if (e.touches.length == 1) | if (e.touches.length == 1) | ||
mouseDown(touch); | |||
} else if (e.type == "touchmove") { | } else if (e.type == "touchmove") { | ||
mouseMove(touch); | |||
} else if (e.type == "touchend") { | } else if (e.type == "touchend") { | ||
mouseUp(); | |||
} | } | ||
} | } |
2016年9月30日 (五) 02:40的版本
WIP