石家莊招聘哪個(gè)網(wǎng)站做的好公司軟文推廣
Cesium 實(shí)戰(zhàn) - 使用 gltf-vscode 查看、預(yù)覽以及編輯 glTF 和 GLB 模型
- VScode（Visual Studio Code） 安裝模型必要插件
- VScode 預(yù)覽自定義關(guān)節(jié)（articulations）動(dòng)作
- VScode 導(dǎo)入 GLB 格式模型
- VScode 導(dǎo)出 GLB 格式模型
模型渲染作為 Cesium 一個(gè)非常重要的功能，目前只支持 glTF 和 GLB 兩種格式，其實(shí)是一種格式，GLB 是 glTF 的二進(jìn)制形式。
在實(shí)際項(xiàng)目中，由于對(duì)模型的操作，可能會(huì)需要查看模型的屬性。之前一直使用 blender 來查看、調(diào)整以及轉(zhuǎn)換等操作。模型轉(zhuǎn)換詳見：Cesium 三維模型使用 blender 調(diào)整位置、坐標(biāo)軸、比例等。
近期有需求，需要給模型增加 自定義關(guān)節(jié)（articulations）動(dòng)作，然后發(fā)現(xiàn) blender 對(duì)于 Cesium 開發(fā)人員不太友好，尤其是查看 glTF 的 json 數(shù)據(jù)屬性。
后來發(fā)現(xiàn)一個(gè)開源項(xiàng)目，可以直接查看和操作 glTF 模型：gltf-vscode。
gltf-vscode 是由 AGI（一家美國(guó)工程仿真領(lǐng)域的企業(yè)） 開發(fā)和維護(hù)的，功能非常強(qiáng)大，比較適合 Cesium 開發(fā)人員。
gltf-vscode 可以查看編輯模型、導(dǎo)入 GLB 模型、GLB 與 glTF 轉(zhuǎn)換等功能。
本文包含 VScode 安裝模型必要插件、預(yù)覽自定義關(guān)節(jié)動(dòng)作、導(dǎo)入 GLB 格式模型、導(dǎo)出 GLB 格式模型 四部分。
VScode（Visual Studio Code） 安裝模型必要插件
Visual Studio Code 下載于安裝比較簡(jiǎn)單，也不需要破解，不過多介紹。
使用 VScode 打開 gltf-vscode 項(xiàng)目。
VScode 應(yīng)該會(huì)自動(dòng)提示安裝所需插件：
復(fù)制 glTF 模型到項(xiàng)目中，這里作者新建 public/model 文件夾來存放模型。
預(yù)覽 glTF 模型，可以查看 glTF 文件數(shù)據(jù)以及預(yù)覽模型：
注意：需要打開 glTF 模型文件之后，在文件內(nèi)右鍵操作。
默認(rèn)為 Babylon 渲染模型，這里也可以切換其他模型預(yù)覽引擎：
以下為 Cesium 官方火箭推進(jìn)器的模型（cesium.vip 鏡像源）：
launchvehicle.gltf
launchvehicle.glb
VScode 預(yù)覽自定義關(guān)節(jié)（articulations）動(dòng)作
預(yù)覽切換為 Cesium 引擎時(shí)，可以查看模型自定義的關(guān)節(jié)（articulations）動(dòng)作：
這里選擇了 SRB 固體助推器模塊組件，并且調(diào)整 Separate、Drop 和 Rotate 關(guān)節(jié)（articulations）參數(shù)來查看效果：
VScode 導(dǎo)入 GLB 格式模型
GLB 模型為二進(jìn)制文件，VScode 不能直接打開，這里演示導(dǎo)入 GLB 格式模型：
將 GLB 文件拷貝到項(xiàng)目中：
由于 GLB 模型轉(zhuǎn)為 glTF 格式，會(huì)生成一系列相關(guān)文件，這里創(chuàng)建文件夾用于存放這些文件：
選中 GLB 模型，右鍵 - 導(dǎo)入 GLB 模型（glTF: Import from GLB）:
選擇創(chuàng)建好的文件夾，這里不建議修改名字，保存：
以下是生成的 glTF 模型以及相關(guān)文件（所有文件均不可刪除，否則會(huì)出問題）：
點(diǎn)擊 glTF 文件，查看內(nèi)容以及預(yù)覽模型：
VScode 導(dǎo)出 GLB 格式模型
glTF 格式模型更方便編輯，但是松散的 glTF 模型（包含 .bin、.jpg 等）不容易移動(dòng)使用，可以導(dǎo)出為 GLB 格式：
導(dǎo)出之后，在 Cesium 中加載使用：
參考博客：
[1]: glTF Tools Extension for Visual Studio Code
[2]: VSCode查看gltf文件（glTF Tools插件）
[3]: 圖形化開發(fā)（六）03-Three.js之導(dǎo)入模型——glTF格式文件導(dǎo)入，3D模型的使用 & vs code之glTF Tools插件的使用方法
[4]: 3D性能優(yōu)化 | 說一說glTF文件壓縮