Live2D Web端实现

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;
    
  • 7
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
live2d-widget是一个可以在网页中添加可爱的看板娘的网页插件。 live2d-widget特性: 在网页中添加Live2D看板娘。兼容PJAX,支持无刷新加载。 警告:本项目使用了大量 ES6 语法,不支持 IE 11 等老旧浏览器。 你也可以在允许的范围内进行二次开发,这里有一些示例 demo.html ,展现基础效果 login.html ,仿NPM的登陆界面 网页看板娘简短安装: 只需要把下面3行代码放到页面中,即可实现网页看板娘效果。(格式自己进行添加下即可) script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js" link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"    live2d-widget详细安装说明: 依赖Dependencies 本插件需要Font Awesome(v4 或 v5)图标支持,请确保相关样式表已在页面中加载。以Font Awesome v4 为例,请在 中加入: link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" 否则图标将无法正常显示。(如果网页中已经加载了任何版本的Font Awesome,就不要重复加载了) 使用Usage 将这一行代码加入或,即可展现出效果: script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js" 如果网站启用了PJAX,由于看板娘不必每页刷新,因此要注意将相关脚本放到PJAX刷新区域之外。 换句话说,如果你是小白,或者只需要最基础的功能,就只用把这一行代码,连同前面加载Font Awesome的一行代码,一起放到html的中即可。 对于用各种模版引擎(例如 Nunjucks,Jinja 或者 PHP)生成的页面,也要自行修改,方法类似,只是可能略为麻烦。以Hexo为例,需要在主题相关的ejs或njk模版中正确配置路径,才可以加载。 但是!我们强烈推荐自己进行配置,否则很多功能是不完整的,并且可能产生问题! 如果你有兴趣自己折腾的话,请看下面的详细说明。 Using CDN 要自定义有关内容,可以把这个仓库Fork一份,然后进行修改。这时,使用方法对应地变为 script src="https://cdn.jsdelivr.net/gh/username/live2d-widget@latest/autoload.js" 将此处的username 替换为你的 GitHub 用户名。为了使 CDN 的内容正常刷新,需要创建新的git tag 并推送至GitHub仓库中,否则此处的 @latest 仍然指向更新前的文件。此外CDN本身存在缓存,因此改动可能需要一定的时间生效。 Self-host 你也可以直接把这些文件放到服务器上,而不是通过CDN加载。 如果你能够通过ssh访问你的主机,请把整个仓库克隆到服务器上。执行: cd /path/to/your/webroot # Clone this repository git clone https://github.com/stevenjoezhang/live2d-widget.git 如果你的主机无法用ssh连接(例如一般的虚拟主机),请选择 Download ZIP,然后通过ftp等方式上传到主机上,再解压到网站的目录下。 如果你是通过 Hexo 等工具部署的静态博客,请在博客源文件(即 source)目录下,执行前述的 git clone 命令。重新部署博客时,相关文件就会自动上传到对应的路径下。为了避免这些文件被 Hexo 插件错误地修改,可能需要设置 skip_render。 这样,整个项目就可以通过你的服务器 IP 或者域名从公网访问了。不妨试试能否正常地通过浏览器打开autoload.jslive2d.min.js 等文件,并确认这些文件的内容是完整和正确的。 一切正常的话,接下来修改一些配置就行了。(需要通过服务器上的文本编辑器修改;你也可以先在本地完成这一步骤,再上传到服务器上) 修改autoload.js中的常量live2d_path为live2d

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值