Live2D Web端实现

最新推荐文章于 2024-06-04 15:18:05 发布

柿沼

最新推荐文章于 2024-06-04 15:18:05 发布

阅读量2w

点赞数 7

分类专栏：网络

本文链接：https://blog.csdn.net/Kakinuma/article/details/50697762

版权

demo预览：http://www.kakinuma.date/l2d.html

官方：http://www.live2d.com/en/

sdk下载：https://link.zhihu.com/?target=http%3A//app2.live2d.com/cubism/sdk/bowiuex/webgl/Live2D_SDK_WebGL_2.0.05_1_en.zip

sdk目录：

framework框架有一个js，lib库有1个，这是最基本的构成

下面有SampleApp1，Simple两个例子，simple是前者的精简版，只有显示没有功能，就不看它了

SampleApp1中

assets包括了背景和模型等资源

src则是模型的初始化，显示，事件绑定等等的功能实现代码

首先为了测试，先导进了所有的.js，然后添加个标签

<!DOCTYPE HTML>
<html>
<head>
     <script src='lib/live2d.min.js'></script>
    <script src='framework/Live2DFramework.js'></script>
    <script src="src/utils/MatrixStack.js"></script>
    <script src="src/utils/ModelSettingJson.js"></script>
    <script src="src/PlatformManager.js"></script>
    <script src="src/LAppDefine.js"></script>
    <script src="src/LAppModel.js"></script>
    <script src="src/LAppLive2DManager.js"></script>
    <script src="src/SampleApp1.js"></script>
</head>


<body>
    <canvas id="test" width="450px" height="500px" style="position:fixed;right:0px;bottom:-10px;">
    </canvas>
    <script>
      sampleApp1();
    </script>
</body>
</html>

.js 文件都按路径放好就好了

然后试着打开页面，看看报错（压根就没觉得可以直接用,因为我压根就没有添加模型文件

init……应该是初始化有错，具体看看

说是null了应该是没传到参数，所以参数canvasId应该是有问题（顺便Canvas在这应该是画布的意思）

顶上面一行，getId出错，那就应该是html里id没写对……随手写了个test确实太随意了……

这个canvasId的来源就在这函数头顶上，就是初始化的Sample1()

改一下，改成glcanvas，改掉以后出现了新的错误，是同样类别的错误，因为官方Sample里有换模型的按钮，所以我没写，Id一样没get到，但是我不想使用换模型的功能，所以我尝试不使用者这功能

所以在初始化函数SampleApp1()中调用的init中，选择不要那个Button

然后所有的change的地方都暂时选择注释掉，地方不少……change的定义，和一些调用，因为Sample中右键模型也是可以change的

然后问题没了，但是理所当然是空白，因为我没加模型

不过审查元素的话，元素是在的（当然在了

现在的SampleApp1.js被修改为

var thisRef = this;


window.onerror = function(msg, url, line, col, error) {
    var errmsg = "file:" + url + "<br>line:" + line + " " + msg;
    l2dError(errmsg);
}

function SampleApp1()
{
    this.platform = window.navigator.platform.toLowerCase();
    
    this.live2DMgr = new LAppLive2DManager();

    this.isDrawStart = false;
    
    this.gl = null;
    this.canvas = null;
    
    this.dragMgr = null; /*new L2DTargetPoint();*/ 
    this.viewMatrix = null; /*new L2DViewMatrix();*/
    this.projMatrix = null; /*new L2DMatrix44()*/
    this.deviceToScreen = null; /*new L2DMatrix44();*/
    
    this.drag = false; 
    this.oldLen = 0;    
    
    this.lastMouseX = 0;
    this.lastMouseY = 0;
    
    this.isModelShown = false;
    
    
    initL2dCanvas("glCanvas");
    
    
    init();
}


function initL2dCanvas(canvasId)
{
    
    this.canvas = document.getElementById(canvasId);
    
    
    if(this.canvas.addEventListener) {
        this.canvas.addEventListener("mousewheel", mouseEvent, false);
        this.canvas.addEventListener("click", mouseEvent, false);
        
        this.canvas.addEventListener("mousedown", mouseEvent, false);
        this.canvas.addEventListener("mousemove", mouseEvent, false);
        
        this.canvas.addEventListener("mouseup", mouseEvent, false);
        this.canvas.addEventListener("mouseout", mouseEvent, false);
        this.canvas.addEventListener("contextmenu", mouseEvent, false);
        
        
        this.canvas.addEventListener("touchstart", touchEvent, false);
        this.canvas.addEventListener("touchend", touchEvent, false);
        this.canvas.addEventListener("touchmove", touchEvent, false);
        
    }
}


function init()
{    
    
    var width = this.canvas.width;
    var height = this.canvas.height;
    
    this.dragMgr = new L2DTargetPoint();

    
    var ratio = height / width;
    var left = LAppDefine.VIEW_LOGICAL_LEFT;
    var

最低0.47元/天解锁文章

柿沼

关注

7
点赞
踩
19

收藏

觉得还不错? 一键收藏
5
评论
Live2D Web端实现

官方：sdk：sdk目录：framework框架有一个js，lib库有1个，这是最基本的构成下面有SampleApp1，Simple两个例子，simple是前者的精简版，只有显示没有功能，就不看它了SampleApp1中assets包括了背景和模型等资源src则是模型的初始化，显示，事件绑定等等的功能实现代码首先为了测试，先导进了所有的.js，然后添加个标
复制链接

扫一扫

专栏目录