文章目錄

• 前言
• 一、準備工作
• 二、具體步驟
• • • 1.將lappdelegate.ts文件里的initialize函數修改成如下所示:
    • 2.在lappmodel.ts里改文件夾路徑、model3.json文件名、.moc3文件名、texture路徑
• 總結

---

前言

這里只講已經有了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-ignoregl = 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，就可以了

總結

以上是生活随笔為你收集整理的网站上部署Live2D模型（moc3格式）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。