使用live2d web驅動(網頁看板娘)


github地址如下:

https://github.com/helloCaijiaqi/live2dDemo/tree/master

原資源位置:

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

下載原資源后打開

image

根據原SampleApp1.html內容重新建立html頁面

image

下面是依照修改的頁面 => 下面刪除了改變模型的按鈕

image

main.js中引入的文件如下

image

文件結構如下

image

修改原SampleApp文件有:SampleApp1.js  LAppDefine.js

SampleApp1.js

image

刪除了按鈕的定義

image

瀏覽器警告:給其添加passive參數

image

注釋了這一條代碼,這個會影響點擊感受 => mousedown時會設置 焦點,人物會看向鼠標

image

增加這一行代碼,讓鼠標在區域內移動時,會設置焦點

image

設置 mouseevent 的函數中 注釋了mouseup的情況,因為前面已經取消了mousedown 時

設置焦點

LAppDefine.js

image

重新設置模版配置的路徑

補充的修改:LAppLive2DManager.js

  image

初始是 –1 這里修改成 4 。就是修改init()時加載的默認模版  這里改的默認模版是shizuku

module.json

觀察:shizuku.module.json

image

textures:是身體部件

physics:是物理配置 => 決定人物頭發應該怎么動等

pose: 配置人物的姿勢

expressions :配置人物表情

layout:布局配置

image

motions :定義動作

idle :空閑時

tap_body: 點擊身體時

pinch_in: 被捏時

pinch_out 被撐開時

shake: 被搖時

flick_head : 被拍打頭部時

最后效果:

image


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM