ff14高級觸發(fā)器不正經(jīng)教程(3)-無面捕/動捕Live2D直播方案介紹及初步教程
幾個月前我直播時用了這套方案，效果注定是比不上面捕的。畢竟全靠高級觸發(fā)器和那么不到百行代碼支撐著，并不復(fù)雜的工作量決定了其上限。但如果有心想沿著這個思路走下去的話，1500多行代碼應(yīng)該就能讓模型的動作流暢且自然到到一個不亞于世面上常見面捕的水平，而且動作更為平滑（上限基本取決于Live2D模型）。
整個過程中最困難的部分應(yīng)該是第三步的“使用SDK打包模型”可以先看看那一段以及參考鏈接中的內(nèi)容再決定是否要動手搞。需要的環(huán)境配置很多，不同版本的兼容或者模型自身或者模型版本也可能會出問題，而且我沒有把握能幫大家解決QAQ。
如果你懂環(huán)境搭建、TypeScript(JavaScript)、Node.js、HTML、Java Web（其他web項目開發(fā)語言亦可）的相關(guān)知識，你會十分輕易的理解這篇專欄的相關(guān)內(nèi)容，而且比我做的更好。
如果你有使用嗶哩嗶哩直播姬的經(jīng)驗(yàn)，你應(yīng)該會在最后直播設(shè)置相關(guān)的部分比我做的更好。我的直播總是被吐槽很模糊。
如果你有ff14高級觸發(fā)器的編寫經(jīng)驗(yàn)，你可能會比我寫出更高效的觸發(fā)器。完全不會的話可以看看我往期專欄，對于搞不定的正則表達(dá)式我也愿意提供力所能及的幫助。
如果你使用過Visual Studio的話就太好了，官方的SDK推薦使用這款編輯器。
希望你能熟練地下載軟件，我可能只會在專欄中放個鏈接。如果找不到的話可以留言或者私信問我，我會提供力所能及的幫助。
ACT不打印日志或者插件不好使的問題我能提供的幫助比較有限，建議大家去插件求助群求助開發(fā)者們。
我的筆記、舊代碼被我搞丟了，之前使用的模型原作者也不再供大家免費(fèi)使用了。雖然本地有模型文件但是再用可能會產(chǎn)生糾紛與不好的影響。這次我也是一邊嘗試開發(fā)，一邊寫本篇專欄，而且換用了新的模型，需要重新編寫動作相關(guān)的觸發(fā)器與配置文件。因此本篇不會像前兩篇那樣花較多時間排版，請見諒。
第一步，下載Live2D Cubism
你需要一個軟件來查看你下載的模型是否符合你的要求，以及是否能做出你想要的動作。使用JavaScript/TypeScript代碼（后文全部簡略且籠統(tǒng)的稱呼為js代碼）來控制Live2D模型能做的遠(yuǎn)比模型展示視頻能做的動作多得多。鏈接如下：
https://www.live2d.com/zh-CHS/download/cubism/
你會注意到頁面說有42天的試用時間什么的，不過其實(shí)沒關(guān)系。試用時間指的是Live2D建模軟件的完整功能PRO版，好像是更多圖層更多變形器更多節(jié)點(diǎn)什么的。我們完全可以僅使用FREE版，甚至我們不需要使用編輯器來創(chuàng)建模型或者編輯模型的工程文件，而是只使用別人已經(jīng)創(chuàng)建好的模型。
下載并安裝好后的文件大概如上，Editor什么的是模型編輯器，Viewer什么的是模型查看器。以上內(nèi)容我們都不用管，因?yàn)槟Ｐ拖螺d好以后直接點(diǎn)擊模型文件（.moc3）就能自動打開了。
第二步，獲取一個心儀的模型
無論直接面捕/動捕直播還是寫代碼玩，我的建議是先用前輩們的公開模型練練手，之后再決定是不是要定制模型。畢竟完全無人使用的話，模型也是會傷心的。
【免費(fèi)L2D模型展示】超絕可愛JK系貓貓免費(fèi)大派送?。?/a>up：慕星Mux
我準(zhǔn)備用這一個模型做嘗試，在視頻的下方有模型獲取地址，喜歡的話請多多支持原作者。
百度了一下，caracal好像是藪貓的意思。不知道是什么貓，但是模型很可愛，很多使用該模型的主播人氣也蠻高的。
對于配合高級觸發(fā)器直播使用來說，我不太記得哪些文件是必須的了。各個文件的具體作用請查看官網(wǎng)文檔或觀看各平臺官方及非官方教程。
雙擊caracal.moc3文件打開模型（其他模型就是xxx.moc3）?？赡芤却齻€一兩分鐘，別急~
多數(shù)模型打開后是默認(rèn)使用待機(jī)（呼吸）動作的，而且視線默認(rèn)跟隨鼠標(biāo)（需左鍵點(diǎn)擊空白處）?？梢允褂檬髽?biāo)滾輪縮放視角，鼠標(biāo)左鍵和鍵盤空格鍵配合移動模型的位置。這貓貓越看越可愛，讓媽咪抱抱，嘿嘿嘿嘿嘿嘿
下方的“顯示全部”“置中”按鈕也留意下，蠻方便的。
動畫菜單里面的東西留意一下，可以視情況打開或關(guān)閉。具體的功能和效果可以配合模型感受下。有些模型可能做得不好，和這里的設(shè)置不適配，所以還是要盡量找一個好點(diǎn)的模型的。
把動畫菜單下除“使用舊的動態(tài)再生方式”各項均打開，然后點(diǎn)擊頁面左上方expression菜單下的各項動作（.json后綴），這些是模型作者已經(jīng)制作完成的表情動作，可以讓我們初步感受下模型是否合胃口。
貓貓的模型就很棒，物理模擬不會很突兀，呼吸什么的也比較自然。她害羞的樣子有點(diǎn)點(diǎn)可愛，眼淚汪汪的樣子也很惹人憐愛。如果你沒有這個文件夾，較大的可能是作者沒給模型做動作。不礙事，我們可以用觸發(fā)器自己寫動作文件。
留意一下圖中“自動眨眼”那個選項后面的按鈕，點(diǎn)擊以后會出現(xiàn)圖中左下方的各項參數(shù)。這些參數(shù)很重要，決定了你用觸發(fā)器控制這個模型所能做到的上限。
在你冷靜下來之后把動畫菜單中的各項全部關(guān)閉，讓你的模型變的一動不動，然后調(diào)出參數(shù)菜單（上圖那個一堆滑桿的）我們現(xiàn)在要客觀評價我們所選模型的各項參數(shù)。
以“角度Y”為例，按住紅點(diǎn)往左拉貓貓會低頭，往右拉貓貓會抬頭。試試各項參數(shù)，有些可能沒效果，有些可能調(diào)整不了，有些（比如手臂切換）甚至還會很大幅度的改變表情、改變姿勢（改變貼圖），請仔細(xì)感受。表情也可以通過這里來改變，畢竟表情動作的遠(yuǎn)離就是修改各項參數(shù)。有些需要多項參數(shù)配合著使用，也請仔細(xì)觀察。贊美作者，貓貓的模型花樣好多。
第三步，使用官方SDK打包模型
放一個官方環(huán)境搭建的鏈接：
https://docs.live2d.com/zh-CHS/cubism-sdk-tutorials/sample-build-web/#
這篇是其他作者的筆記，參考價值很高，感謝原作者
https://blog.csdn.net/weixin_42578046/article/details/123509508
我們需要下載Visual Studio（后面簡稱為VS）并為其安裝Live2D Cubism SDK for Web（后面簡稱為官方SDK）、Node.js、TypeScript環(huán)境。
具體安裝流程可能如下（優(yōu)先查看官方教程，我真的想不起來了qwq）：
安裝VS
安裝Node.js與TypeScript（這兩步我完全沒有記憶了，甚至懷疑是否需要安裝）
下載官方SDK
然后來到D:\CubismSdkForWeb-4-r.4\Samples\Resources（具體路徑取決于你官方SDK解壓路徑）目錄下，把下載的模型文件夾放進(jìn)去，如下：
caracal文件夾是我剛放進(jìn)去的，其余幾個則是之前就有的示例文件。打開文件夾會發(fā)現(xiàn)里面的目錄層級類似，如果差的很多可能是模型版本導(dǎo)致的，不保證能打包成功。
接下來回到外層目錄（我這里是直接回到D盤根目錄），右鍵文件夾使用VS打開，如下：
貓貓的模型在這：
在VS中打開Samples/TypeScript/Demo/src/lappdefine.ts這個文件，找到下圖中這行代碼：
編輯一下選中的那行，可以把你的模型加上或者刪掉其余的部分。貓貓的模型名是caracal，所以我做了如下修改：
點(diǎn)擊視圖→終端，打開VS的PowerShell，輸入命令npm install
默認(rèn)你是在項目根目錄的，你需要使用命令進(jìn)入package.json所在的目錄：
然后看看終端提示是否類似這個：
它表示你所處的位置是Demo文件夾下，現(xiàn)在你需要根據(jù)package.json安裝項目中所需的插件，使用下方命令進(jìn)行安裝：
然后一邊向海德林祈愿一邊見招拆招吧（日志有復(fù)制按鈕，復(fù)制按鈕的截圖下一張就是，遇到問題別傻乎乎的挨個字母敲），我遇到的問題是：
網(wǎng)上查了一下，先用一下這個然后再npm install就可以了（原因不深究，畢竟無論TypeScript還是VS我都完全不懂）
打包看起來蠻順利的（下方為打包時運(yùn)行的命令與控制臺信息），運(yùn)行的命令為npm run build
打包成功之后會出現(xiàn)一個新文件bundle.js，這個就是移植到其他環(huán)境用的重要文件之一了：
下方的那兩個是復(fù)制和粘貼按鈕。
可以使用npm run serve命令嘗個鮮，等待數(shù)秒后服務(wù)啟動，并提示你可訪問的路徑
不喜歡圖片太大，所以把瀏覽器稍稍縮小了一點(diǎn)。
我順便把路徑貼上來，不清楚你們的是否為同一個
右上方有個齒輪，是切換模型用的（具體有哪些模型取決于前面步驟中lappdefine.ts怎么改的）。網(wǎng)頁打開后模型會加載一會?？赡苡悬c(diǎn)慢，別擔(dān)心很正?！，F(xiàn)在你可以點(diǎn)一點(diǎn)了，你的模型（可能）會使用待機(jī)動作或跟隨你的鼠標(biāo)轉(zhuǎn)頭并移動視線。
（在你玩夠了之后）回到你的VS終端，ctrl+c停止服務(wù)。你會發(fā)現(xiàn)你瀏覽器中的模型仍然能跟隨你的鼠標(biāo)轉(zhuǎn)頭。這沒問題，因?yàn)榈侥壳盀橹鼓Ｐ瓦€不需要和后臺有交互。我們下一步（也可能是再下一步）涉及到Live2D模型與高級觸發(fā)器交互時若關(guān)掉后臺服務(wù)，你的模型可能就會變?yōu)槟绢^人了。
第四步，移植模型
說的可能有點(diǎn)籠統(tǒng)，這一步我要做的是把模型以及js文件移植到Java環(huán)境。用Java是因?yàn)槲易钍煜さ氖荍ava，你可以使用其他你擅長的語言。要是你不掌握相關(guān)知識的話也許你可以跟著我淺學(xué)一點(diǎn)Java。
我使用的是Eclipse，相關(guān)的Java環(huán)境與Maven環(huán)境已經(jīng)搭建好了，接下來我會創(chuàng)建一個Maven項目并使用SpringBoot搭建一個后臺服務(wù)（為方便理解，后臺服務(wù)相關(guān)的東西我在后文籠統(tǒng)的稱呼為Java）。接下來的部分主要介紹Live2D與觸發(fā)器相關(guān)的部分，涉及到Java的僅介紹關(guān)鍵部分。
我們先去VS中把重要的文件拿出來，需要的是選中的那3個。
上一步中打包生成的bundle.js每次改.ts代碼都需要重新打包，把他們?nèi)齻€拷貝出來，連同你的模型文件夾一起放進(jìn)你的資源目錄文件夾下。
上面提到的資源目錄文件夾對于Java而言就是圖中的static文件夾，html網(wǎng)頁、js代碼（如果有）、css代碼（如果有）以及模型文件夾我都會放在static下。那個caracal文件夾就是你們熟悉的模型文件夾，從始至終只有一個caracal文件夾。
在bundle.js中搜一下ResourcesPath，找到了如下一行：
它表示引用這個js的文件（html文件）與放著模型文件夾的目錄的相對位置。我們需要對照著java的目錄層級進(jìn)行調(diào)整。由于我caracal和html文件都直接放在static文件夾下，我可以這么寫：
同理，我們打開index.html
別的可以先不管，主要是相對路徑我們需要改一下
上面這些改成下面這些（視具體情況而定）。第一個不知道做什么用的，直接注了。
最后調(diào)整下Java相關(guān)的配置，啟動服務(wù)，訪問Java默認(rèn)路徑：http://localhost:8080/
關(guān)于后端的部分我不打算上代碼了，有想要的小伙伴可以問我要。想要前端/后端代碼我可以傳github或者直接給你，想整套直接用的話我可以打jar包發(fā)你，裝完java的jdk環(huán)境直接運(yùn)行就好。
f12看了眼瀏覽器控制臺，有報錯，但是跑起來了。移植比我想象的簡單的多。
第五步，修改報錯
以下操作我自己看了都高血壓，正規(guī)操作其實(shí)應(yīng)該是修改ts代碼然后重新編譯。各位按需求決定是治標(biāo)、治本還是放棄治療。
提示一個名為m的變量未定義的報錯可以注釋掉bundle.js中這一行：
提示this._gear為空可以注釋掉bundle.js中這3行：
提示this._back為空可以注釋這一行：
最后還會提示兩個圖片404的錯誤，這兩個是齒輪和背景圖片，如果想予以保留的話可以導(dǎo)入圖片然后修改變量地址，我這里直接將值設(shè)為空字符串。
這時候注意到背景是黑色的，我們需要它變成透明的，不然直播時會遮住后面的直播畫面。我們注釋掉這一行：
好的，差不多了。
看看效果，舒服些了，沒有太多的報錯信息，背景為透明。微張的小嘴以及發(fā)型的變化我們下一章介紹。
如果只是想在直播間或者個人網(wǎng)頁上放一個live2D做一些待機(jī)動作，那么上述步驟完成后就已經(jīng)可以使用了。但若是想讓其做一些表情動作或者調(diào)整模型的參數(shù)，還需要繼續(xù)往下看。
第六步，模型動作修改方法介紹、數(shù)據(jù)結(jié)構(gòu)的創(chuàng)建、建立websocket鏈接
在bundle.js中，我們控制模型動作的代碼較為集中。結(jié)合官方SDK使用手冊（你比較關(guān)心的大概是下圖中的部分）：
https://docs.live2d.com/zh-CHS/cubism-sdk-manual/top/#
我們發(fā)現(xiàn)官方比較推薦我們在如下代碼中修改/添加：可以搜this._model.loadParameters()
這段代碼所處的方法LAppModel.prototype.update如果我沒理解錯的話是一幀執(zhí)行一遍的，官方SDK通過這里的代碼來更新模型每一幀各圖層的參數(shù)。
我來介紹文檔中大家可能最為關(guān)心的用法：設(shè)定參數(shù)。我沒有太深入研究，如有需要請查閱官方文檔。
先來看一下自帶的動作影響了哪些參數(shù)：
可以直接去模型瀏覽器中查看，還能直接看效果。在頁面左下方會顯示影響的參數(shù)中文名，記住這個中文名，然后按照下一步的方法查找ID。記得把“動畫”菜單中需要勾選的選項都勾上，不然表情可能沒效果。
設(shè)定參數(shù)在官方文檔中章節(jié)名為“參數(shù)操作-設(shè)定參數(shù)-覆蓋值”。
第一行獲取id，第二行設(shè)定參數(shù)值。
用于獲取id的字符串查看方法如下：
左上方選中模型文件，在下方漲到想要調(diào)整的參數(shù)。鼠標(biāo)移動上去括號中的就是ID，右鍵漢字部分可以直接復(fù)制ID。
setParameterValueById方法包含三個值：id、參數(shù)的值、影響程度。影響程度有點(diǎn)類似權(quán)重的概念，簡單來說，設(shè)定為1就會瞬間變化，而像我一樣設(shè)定為0.001就會變化很慢。如果你和我上方代碼塊中的寫法相同，那貓貓的嘴會從模型加載完畢開始，逐漸張大，最后完全張開。
至于參數(shù)的取值范圍……我不知道如何獲取，官方文檔不知道是沒寫還是我看漏了。代碼中獲取的話可以代碼中搜一下“getParameterMaximumValue”和“getParameterMinimumValue”，參數(shù)都是parameterIndex，需要先獲取參數(shù)的索引。
第五步最后一張圖片是代碼修改如下的結(jié)果：
動手能力強(qiáng)的后面的部分可以不用看了，我下面將會使用播放表情與設(shè)定參數(shù)兩個方法配合websocket鏈接的方式從外部控制貓貓的動作。
在建立websocket鏈接之前，我們需要約定一種數(shù)據(jù)結(jié)構(gòu)。websocket接收數(shù)據(jù)，并存入其中。LAppModel.prototype.update這個方法（上方代碼塊所處的方法）讀取其中的數(shù)據(jù)，修改模型。
觀察一下，發(fā)現(xiàn)設(shè)定參數(shù)這個方法需要三個參數(shù)：一個代表參數(shù)/動作名的字符串以及另外兩個參數(shù)。javascript為弱類型語言，我們可以為待設(shè)定參數(shù)創(chuàng)建一個二維數(shù)組。二維數(shù)組的索引為代表參數(shù)/動作名的字符串，值為一個長度為2的一維數(shù)組。該一維數(shù)組中兩項分別代表參數(shù)的值和影響程度。
bundle.js中的代碼很多，為了方便查找我們把這個二維數(shù)組定義在window.onload觸發(fā)的方法上方：
簡陋了點(diǎn)，但是可行。
接下來寫一下websocket的代碼，依舊是在bundle.js中，修改window.onload就ok的。
window.onload() 方法用于在網(wǎng)頁加載完畢后立刻執(zhí)行的操作，即當(dāng) HTML 文檔加載完畢后，立刻執(zhí)行某個方法。
window.onload是很常見的用法，bundle.js中window.onload方法如下（上方的兩行代碼是我們剛添加的）：
我們在這個方法體中找一個合適的地方插入我們建立websocket鏈接的代碼，添加在方法體中的最后一行就不錯（有注釋的都是我新添加的代碼）：
正常工作時，上方代碼塊中的onopen、onclose、onerror用途其實(shí)都不大，打印兩行日志而已。創(chuàng)建連接那里的連接地址取決于你的后臺服務(wù)，在我這里對應(yīng)的是java相關(guān)的部分。
如果你的服務(wù)部署在遠(yuǎn)程服務(wù)器上，那你可以把代碼塊中的localhost更換為遠(yuǎn)程服務(wù)器的ip地址。
現(xiàn)在我們定義一下json報文的格式，我計劃該報文由高級觸發(fā)器生成，發(fā)給后臺服務(wù)（java）并由后臺服務(wù)直接轉(zhuǎn)發(fā)給websocket并反映到live2D模型上，讓后臺服務(wù)器做盡可能少的事情。掉線了六個大章節(jié)的高級觸發(fā)器終于有了露臉的機(jī)會。
報文每次可以發(fā)送若干個動作，動作分為兩大類：參數(shù)(p)、刪除參數(shù)(dp)。這里的刪除參數(shù)指將該項數(shù)據(jù)恢復(fù)為默認(rèn)值。p代表parameter，d代表delete，短一點(diǎn)的話寫觸發(fā)器時能輕松些。
我來給出兩個示例報文，第一個和第五步末尾的效果相同——扎起頭發(fā)并逐漸張開嘴；第二個讓頭發(fā)恢復(fù)原樣，小嘴立刻閉合（想讓嘴慢慢閉合的話可以仿照示例報文1寫，叫參數(shù)值從1改為0）。
示例報文1：
示例報文2：
請結(jié)合上述兩條示例報文食用下方ws.onmessage代碼：
有點(diǎn)過分緊湊了，可能不太好閱讀。邏輯還是蠻簡單的：
把報文按照不同的分組拆分。
判斷分組是添加參數(shù)(p)還是刪除參數(shù)(dp)。
p的話直接設(shè)定parameter數(shù)組就行，dp的話要刪除parameter數(shù)組并添加進(jìn)parameter_del數(shù)組。
等待前文提到的LAppModel.prototype.update處理數(shù)組。
假設(shè)你的后臺服務(wù)已經(jīng)創(chuàng)建成功，那么剩余的工作已經(jīng)不多了。（java關(guān)鍵代碼我會放在本專欄較靠后的位置）。
現(xiàn)在我們動手改造this._model.loadParameters();和this._model.saveParameters();中間的部分。（前面展示過，讓貓貓小嘴張開以及修改為短發(fā)的那段代碼）
這是改造完成的樣子，我刪除了之前寫死的參數(shù)，修改為讀取數(shù)組對象的動態(tài)方法：
核心知識點(diǎn)已經(jīng)講完了，啟動服務(wù)，將示例報文1發(fā)往后臺——貓貓換了發(fā)型并慢慢張開了嘴。將示例報文2發(fā)往后臺，變回及腰長發(fā)、張開的嘴合上了。再發(fā)報文1，又變成了短發(fā)，并慢慢張開了嘴。
第七步，優(yōu)化點(diǎn)
你可能還想根據(jù)模型做一點(diǎn)其他的小改動，我來介紹一些我想做的改動：
我注意到貓貓有時候不眨眼，有時候會瘋狂眨眼。查了下官方文檔（https://docs.live2d.com/zh-CHS/cubism-sdk-manual/autoeyeblink/#），理論應(yīng)該是0~2*設(shè)定值眨眼一次的，對于貓貓的模型來說是0~8s。
看了眨眼相關(guān)的代碼發(fā)現(xiàn)this._eyeBlink.updateParameters(this._model, deltaTimeSeconds);的調(diào)用頻率與預(yù)期不符，比預(yù)期的低了太多太多。排查了一下把這段代碼注了（這段代碼在前文提到過），示例中保留它不知是否為教程/展示用。
修改后眨眼頻率正常了，在0~8秒的范圍內(nèi)喵。她眨眼時耳朵也會動！超可愛的！
翻了翻代碼，在this._model.saveParameters();下面幾行發(fā)現(xiàn)了一個控制視線以及轉(zhuǎn)頭角度的方法：
這么好用的方法感覺有必要利用一下，到時候配合高級觸發(fā)器處理一下，根據(jù)游戲角色選中目標(biāo)的位置轉(zhuǎn)動live2D視角什么的。
先新增一個視角位置的變量。
再把websocket的處理邏輯補(bǔ)充上~好的做完了，發(fā)個報文試試效果。
具體的數(shù)字要取決于你的模型，貓貓這個模型(x,y)=(1,-1)時就差不多已經(jīng)崩了。
貓貓呼吸時身體會左右搖晃，感覺動作搖晃有點(diǎn)大。改了一下呼吸影響的參數(shù)的最大值和權(quán)重，搜setupBreath可能比較好找。官方關(guān)于這里的介紹文檔在https://docs.live2d.com/zh-CHS/cubism-sdk-manual/breath/#
想呼吸時加點(diǎn)別的參數(shù)也不影響，上面的東西也可以注掉幾行，參數(shù)可以自己修改體驗(yàn)一下。
有趣的是，貓貓的尾巴并不是呼吸導(dǎo)致的，呼吸那里甚至全篇都沒有尾巴的參數(shù)——貓貓的尾巴是因?yàn)殚_著物理模擬，呼吸導(dǎo)致來回晃。把物理模擬的代碼注掉后尾巴就不晃了。
第八步，觸發(fā)器編輯
掉頭發(fā)的部分終于寫完了，接下來是愉快的設(shè)計觸發(fā)器時間了。這次的高級觸發(fā)器入門門檻就很低了，不需要太復(fù)雜的邏輯，基本上抓日志然后使用“通用JSON操作”發(fā)請求就好。
圖中正則表達(dá)式那里別抄，請換成正確的正則表達(dá)式！對于高級觸發(fā)器不熟悉的小伙伴可以看我同系列往期教程。搖尾巴的那篇講的還是蠻細(xì)的。
第九步，開直播
打開我們好用的嗶哩嗶哩直播姬，點(diǎn)擊左側(cè)“素材”，選擇瀏覽器：
來源命名隨便輸入。URL寫你瀏覽器內(nèi)能訪問到的鏈接就可以。寬度高度自己調(diào)下，模型是能自適應(yīng)的，只要不大的離譜都十分清晰。自定義CSS可以默認(rèn)，也可以清空，不礙事的。點(diǎn)確定之后可以挪移調(diào)整位置。
如果想調(diào)整大小的話不建議直接拖動那個方框，會失真，變得很模糊。請鼠標(biāo)移動到頁面左上方，點(diǎn)擊“Live2D”旁的編輯按鈕，以此來調(diào)整頁面大小。
執(zhí)行觸發(fā)器，觀察一下角色的衣服。有變化，很成功。
當(dāng)Live2D突然收不到后臺的信號時，可以在直播姬素材頁面Live2D的編輯窗口點(diǎn)擊刷新當(dāng)前頁面緩存。效果同使用瀏覽器時的刷新按鈕，多數(shù)情況下會恢復(fù)正常。
完結(jié)撒花~新年快樂
附件，java代碼
java代碼（maven構(gòu)建項目、springboot框架）（只貼了websocket相關(guān)的部分）：
Chat.java
Config.java
再貼一小段pom.xml
別的就是編輯器、java、Maven和springboot基本功了吧，如果遇上其他我能提供幫助的問題也請私信或留言~
相關(guān)鏈接：
Live2D官網(wǎng)（左上角能選擇中文，在上方導(dǎo)航的“各種下載”中能跳轉(zhuǎn)至SDK下載鏈接；點(diǎn)擊頁面中間的“下載試用版（免費(fèi)）"能跳轉(zhuǎn)到軟件本體下載）
https://www.live2d.com/zh-CHS/
Live2D官方SDK（左上角能選擇中文，本專欄使用及下載的是頁面中的“Live2D Cubism SDK for Web”。其他用途的sdk在頁面中也能找到，使用同時請遵守官方各項規(guī)定）
https://www.live2d.com/zh-CHS/download/cubism-sdk/
本次教程使用的免費(fèi)模型，鏈接為站內(nèi)地址。模型獲取地址在視頻介紹中，如果喜歡請為原視頻點(diǎn)贊收藏投幣支持一下。
官網(wǎng)編輯器本體（含瀏覽器）下載鏈接
https://www.live2d.com/zh-CHS/download/cubism/
《live2d web筆記之一：官方SDK嘗試》參考價值很大的文章，感謝原作者
https://blog.csdn.net/weixin_42578046/article/details/123509508
官方SDK使用環(huán)境搭建：
https://docs.live2d.com/zh-CHS/cubism-sdk-tutorials/sample-build-web/#
百度百科——報文：
https://baike.baidu.com/item/%E6%8A%A5%E6%96%87/3164352
天氣預(yù)報代碼來源（專欄中未使用）：
https://github.com/Kikugumo/FFXIV-Weather-Forecast
