网站上部署Live2D模型（moc3格式）

---

前言

这里只讲已经有了Live2D模型之后如何部署到网站上 完全的自己动手制作并部署一个Live2D项目实在是太麻烦了，想要零基础一小时，两小时搞定是非常困难的，因为涉及的东西太多了，完全自己做要学相当多的东西：学PS切图、学Live2DCubsim做模型、学html+css设置布局、学Javascript去看懂官方给的SDK，NodeJs也要会一点，因为官方SDK是一个webpack项目、VSCODE也要会用。
ちなみに 这是我前一阵刚研究的，目前只能部署单一Live2D模型，没有切换模型以及各种其他功能。

---

一、准备工作

首先要有一个已经做好的Live2D模型，如果没有的话要先去学PS和Live2D制作，入门大概半天时间。

安装NodeJs、会用VSCODE

在Live2D的官网上下载官方提供的SDK [官网链接](https://www.live2d.com/download/cubism-sdk/)
选择Cubsim SDK for Web

了解基本的npm命令，npm run build等

熟悉javascript

能够在浏览器上进入控制台调试（至少要会查看Console的报错信息）

这里的js文件不能直接调用，需要自己修改官方给的SDK里的js文件之后使用npm命令生产出一个bundle.js文件
如果上面这些都不会而且只是想要部署一个简单模型的话，可以直接使用我的bundle.js文件，按我配置的路径命名文件夹和文件也可以

---

二、具体步骤

1.将lappdelegate.ts文件里的initialize函数修改成如下所示:

这里的代码参照了大佬的博客https://blog.csdn.net/weixin_44128558/article/details/104792345

public initialize(): boolean {
    // 创建画布
    // canvas = document.createElement('canvas');
    // canvas.width = LAppDefine.RenderTargetWidth;
    // canvas.height = LAppDefine.RenderTargetHeight;
    // 原来是用js动态在网页上创建画布，画布的长宽在lappdefine.ts指定，现在直接在html中已经有了画布直接拿过来使用就行
    canvas = <HTMLCanvasElement>document.getElementById("live2d"); // index.html中的id为live2d的画布
    canvas.width = canvas.width;
    canvas.height = canvas.height;
    canvas.toDataURL("image/png");

	// 这个是index.html工具栏中的眼睛图标，点击眼睛图标就切换下一个模型
	// 正规来说应该留个切换模型的口子，在message.js中调用，因为懒就直接在这里写了
    //fui_eye = <HTMLSpanElement>document.getElementsByClassName("fui-eye")[0];

    // 初始化gl上下文 （代码段结束后有解释）
    // @ts-ignore
    gl = canvas.getContext('webgl',{alpha: true }) || canvas.getContext('experimental-webgl');

    if (!gl) {
      alert('Cannot initialize WebGL. This browser does not support.\n不能初始化WebGL，该浏览器不支持WebGL，请切换浏览器重试');
      gl = null;
      document.body.innerHTML =
        '该浏览器不支持 <code>&lt;canvas&gt;</code> 标签元素，请切换浏览器重试 .';
      // gl初期化失敗
      return false;
    }

    // 向DOM添加画布
    // document.body.appendChild(canvas);  

    if (!frameBuffer) {
      frameBuffer = gl.getParameter(gl.FRAMEBUFFER_BINDING);
    }

    // 透明设置
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

    const supportTouch: boolean = 'ontouchend' in canvas;  //是否支持触碰（触摸屏）

    if (supportTouch) {   // 没有触屏电脑（两种事件都要注册）
      // 注册触摸相关的回掉函数  （触摸屏）
      canvas.ontouchstart = onTouchBegan;
      canvas.ontouchmove = onTouchMoved;
      canvas.ontouchend = onTouchEnded;
      canvas.ontouchcancel = onTouchCancel;
    } else {
      // 注册鼠标相关的回呼函数
      canvas.onmousedown = onClickBegan;
      // canvas.onmousemove = onMouseMoved;   //原来是在画布上注册鼠标移动事件，鼠标移出画布就监听不到
      window.onmousemove = onMouseMoved;  //对整个window窗口监听，是角色跟随鼠标，需要对鼠标坐标获取做调整
      canvas.onmouseup = onClickEnded;
      //fui_eye.onmousedown = (): void => {	// 工具栏眼睛图标点击事件
      //  const live2DManager: LAppLive2DManager = LAppLive2DManager.getInstance();
      //  live2DManager.nextScene();
      //};
    }

    // AppView的初始化
    this._view.initialize();

    // Cubism SDK的初始化
    this.initializeCubism();

    return true;
  }

2.在lappmodel.ts里改文件夹路径、model3.json文件名、.moc3文件名、texture路径

---

总结

在html页面引入
script src = “…/…/…/Core/live2dcubismcore.js”>
script src=“dist/bundle.js”>
两个js标签，并设置好画布canvas，就可以了