從 OBJ 到 FBX：圖撲新一代飛機模型、動畫、漫游

相信大多數(shù)圖撲 HT 用戶都曾見過這個飛機的 Demo，在圖撲發(fā)展的這十年，這個 Demo 是許多學習 HT 用戶一定會參考的經典 Demo 之一。

這個 Demo 用簡潔的代碼生動地展示了 OBJ 模型加載、數(shù)據綁定、動畫和漫游等功能的實現(xiàn)。許多用戶參考這個簡單的 Demo 后，實現(xiàn)了更多效果更加炫酷的功能?？梢哉f，這個 Demo 為很多使用圖撲 HT 開發(fā)的用戶提供了指引。

隨著圖撲 HT 技術的不斷更新迭代，原有場景顯得過于簡單、且模型不夠精細，功能上也過于單一。為了解決以上問題，在圖撲十周年之際，我們推出了升級版的飛機 Demo Pro，將展示更加精美、更加復雜的模型和場景，以及更加多樣化的功能。

FBX 與 OBJ

舊版本的飛機 Demo 使用的是網上現(xiàn)成的 OBJ 模型，模型效果粗糙，沒有材質效果，比較生硬。螺旋槳和指示燈的動畫需要通過解析 OBJ 模型并進行數(shù)據綁定，才能驅動數(shù)據變化，實現(xiàn)動畫效果。

如今，圖撲 HT 已支持 FBX 模型，飛機 Demo Pro 中的飛機模型即采用了該格式。場景由圖撲優(yōu)秀的 3D 設計師精心建模，呈現(xiàn)出精致絕美的效果。FBX 模型模型支持配置材質，只需在建模軟件中保留好模型的材質通道，即可在圖撲 HT 中自定義配置材質效果，實現(xiàn)更加真實的模型渲染效果。此外，相對 OBJ 模型，F(xiàn)BX 模型使用更小的文件就能實現(xiàn)更加炫目的效果。

圖撲 HT 支持播放 FBX 模型動畫，所以在飛機 Demo Pro 中，制作飛機螺旋槳動畫無需編寫代碼。設計師制作好動畫后，可使用 plane.getAnimationNames() 獲取到動畫名稱列表，使用 plane.playAnimation(animationName, speed, start, loop) 方法播放動畫。同時也可以使用 plane.pauseAnimation() 和 plane. resumeAnimation() 控制當前播放動畫的啟停。為了方便統(tǒng)一控制飛行動畫，飛機 Demo Pro 中是在飛行動畫的 action 中使用 plant.forwardAnimation(1 / 60) 向控制螺旋槳動畫每次前偏移 1 / 60 秒實現(xiàn)動畫播放效果。

漫游

舊版本 Demo 的飛機漫游功能是一個最大的亮點，這也是圖撲項目中漫游效果的主要實現(xiàn)方式。在飛機 Demo Pro 中，圖撲基于舊版本的實現(xiàn)方式，增加了更豐富效果。

漫游效果的實現(xiàn)可以分成三個主要步驟：

確定漫游路徑：漫游可以理解為一個物體或者一個人需要從 A 點到 B 點的過程，在出發(fā)前需要確定應該往哪條路走，所以在漫游前需要確定漫游的路徑。漫游的路徑可以使用不規(guī)則圖形進行繪制，通常情況下，漫游路徑是使用 ht.Polyline 進行繪制的，使用 ht.Polyline 繪制路徑的優(yōu)勢是管道的點支持設置不同高度。在 Demo 中，用戶可以上下拖動藍色小球控制管道點的高度，從而使漫游效果更加豐富；

確定漫游物品：漫游物品可以是場景中的任意節(jié)點，也可以是場景的相機和中心點，此 Demo 中漫游的節(jié)點是飛機；

實現(xiàn)漫游動畫：動畫效果是在一段時間內控制屬性變化實現(xiàn)，HT 提供了 ht.Default.startAnim(params) 動畫函數(shù)來實現(xiàn)動畫。漫游動畫需要遞增或者遞減的屬性是節(jié)點的位置和旋轉角度，這些數(shù)據可以使用管道獲取。g3d.getLineLength(path) 獲取管道長度，g3d.getLineOffset(path, lineLength * v) 獲取管道百分比的 offset，設置飛機的位置 plane.p3(offset.point.x, offset.point.y, offset.point.z)，同時設置飛機轉向 plane.lookAt([offset.point.x + offset.tangent.x, offset.point.y + offset.tangent.y, offset.point.z + offset.tangent.z], 'front')。

和物體漫游效果原理一致，場景漫游是獲取到的管道信息設置在場景的 Eye 和 Center 屬性上。在飛機 Demo Pro 中，我們還新增了環(huán)繞漫游 Around 漫游，使用 g3d.flyTo(plane,{distance: distance}) 將場景視角定位到物體上，達到環(huán)繞飛機跟隨的漫游效果。

漫游音效

在飛機 Demo Pro 的漫游過程中，可通過點擊右下角的音效控制按鈕播放飛機的飛行音效，使得場景變得更加生動有趣。此外，每當飛機到達一個藍色小球時，還會播放到達音效，進一步增加了 Demo 的交互性。

為實現(xiàn)上述效果，需要在動畫運行過程中判斷控制球和飛機節(jié)點的包圍盒是否相交，相交時即播放到達音效，節(jié)點相交判斷，可先獲取節(jié)點包圍盒 box = g3d.getBoundingBox(node)，再獲取節(jié)點的三維包圍盒 box3 = new ht.Math.Box3(new ht.Math.Vector3(box.min), new ht.Math.Vector3(box.max))，最后判斷兩個節(jié)點包圍盒是否相交 box3.intersectsBox(other_box3)。

材質切換

由于 OBJ 模型只能配置一個材質或者貼圖，使用中如果需要切換模型風格，一般使用切換直接切換節(jié)點的 shape3d 屬性實現(xiàn)。相比 OBJ 模型而言，F(xiàn)BX 模型能夠同時配置多個材質，使得模型材質效果更加豐富多彩。飛機 Demo Pro 中的飛機模型使用的是 FBX 模型，可以在右上角屬性面板切換 BodyColor 控制飛機的材質屬性切換 plane.s(‘matDef’,{‘材質名稱’:’材質’})。

除了直接切換模型的 matDef 屬性，還可以直接修改已經注冊的材質信息切換風格。例如飛機 Demo Pro 中的指示燈，是使用 ht.Default.getMaterial('signalCircleColor') 方法，可以獲取到已經注冊的 signalCircleColor 材質信息，直接修改對象的對應的屬性值 signalCircleColor.diffuse = color。修改材質屬性后，需要使用 plane.iv() 刷新節(jié)點。使用這個方案需要注意，其他使用了相同材質的節(jié)點，在觸發(fā)刷新后也會修改材質樣式。因此，直接修改材質信息的方式，建議材質在只有一個節(jié)點使用或者需要批量修改場景風格時使用。

場景美化

舊版本飛機 Demo 場景只有背景顏色和枯燥乏味的起飛地板。而飛機 Demo Pro 的場景則提供更加豐富的場景，如天空球、輝光、頭燈、環(huán)境光等多樣化屬性，配合代碼驅動水面材質 uvOffset 屬性變化做 uv 偏移，形象還原了水面波光粼粼，緩緩流動的動態(tài)效果。相比舊版本，飛機 Demo Pro 的內景設計更加精美，錯落有致，讓用戶學習 HT 的過程變得更加生動有趣。

在過去的十年里，隨著技術的不斷發(fā)展，圖撲軟件不斷推陳出新、不斷更新迭代我們的自研產品。從最初只能加載 OBJ 模型、無法呈現(xiàn)材質效果的情況，到現(xiàn)在新增了支持 FBX 、GLTF、GLB 模型，并且支持材質配置等功能，圖撲一直在不斷創(chuàng)新和突破自我，力求為用戶提供更加優(yōu)質的產品和服務。

未來，我們將繼續(xù)為大家提供更多精美的案例和更加強大的技術，滿足用戶的需求和期望。

圖撲軟件 HT for Web 可實現(xiàn)在 Web 瀏覽器中創(chuàng)建和展示高性能的交互式 3D 可視化解決方案，允許用戶創(chuàng)建、編輯、渲染和導出三維模型，適用于各種工業(yè)互聯(lián)網領域。HT 使用 HTML5 現(xiàn)代 Web 技術，無需安裝任何插件或附加軟件，即可在各種 Web 瀏覽器中運行。并提供了豐富的功能和工具，包括模型加載、材質編輯、動畫制作、光照渲染、碰撞檢測等，可以滿足復雜的 3D 可視化、數(shù)字孿生應用需求。

審核編輯 黃宇