github地址如下:
https://github.com/helloCaijiaqi/live2dDemo/tree/master
原資源位置:
下載原資源后打開
根據原SampleApp1.html內容重新建立html頁面
下面是依照修改的頁面 => 下面刪除了改變模型的按鈕
main.js中引入的文件如下
文件結構如下
修改原SampleApp文件有:SampleApp1.js LAppDefine.js
SampleApp1.js
刪除了按鈕的定義
瀏覽器警告:給其添加passive參數
注釋了這一條代碼,這個會影響點擊感受 => mousedown時會設置 焦點,人物會看向鼠標
增加這一行代碼,讓鼠標在區域內移動時,會設置焦點
設置 mouseevent 的函數中 注釋了mouseup的情況,因為前面已經取消了mousedown 時
設置焦點
LAppDefine.js
重新設置模版配置的路徑
補充的修改:LAppLive2DManager.js
初始是 –1 這里修改成 4 。就是修改init()時加載的默認模版 這里改的默認模版是shizuku
module.json
觀察:shizuku.module.json
textures:是身體部件
physics:是物理配置 => 決定人物頭發應該怎么動等
pose: 配置人物的姿勢
expressions :配置人物表情
layout:布局配置
motions :定義動作
idle :空閑時
tap_body: 點擊身體時
pinch_in: 被捏時
pinch_out 被撐開時
shake: 被搖時
flick_head : 被拍打頭部時
最后效果: