在本文中，映維網(wǎng)將與大家學習何謂3D模型，如何在項目中使用它們，以及如何為它們制作動畫。

    1. 什么是3D模型

    你可能記得我們在幾何圖形研討會的最后添加了一個基于gltf-模型組件的鴨子模型。這個模型是一系列由三角形（一種網(wǎng)格）組成的幾何圖形對象集合，結合了紋理和內(nèi)部動畫。這個模型是Blender，Maya或Tinkercad等3D建模程序的輸出。

    VR中的所有一切都包含幾何圖形。這種幾何圖形定義了形狀。它們可能看起來像是抽象的形狀，比如說球體或圓柱體，但其背后是由三角形組成，因為只有這樣計算機才知道如何進行繪制。使用a-sphere這樣的A-Frame組件來將抽象形狀轉換為三角形。然而，有些形狀過于復雜，無法用簡單的數(shù)學進行描述。所以，我們必須使用3D建模工具來繪制這些形狀。

    3D建模工具非常強大，但它們需要大量的經(jīng)驗，而且它們輸出的文件通常不能直接用于Web。相反，我們必須將從原生格式轉換為適合Web的模式：GLTF。

    2. 什么是GLTF？

    GLTF代表Graphics Language Transmission Format（圖形語言傳輸格式）。這種跨平臺格式已成為Web上的3D對象標準。它由OpenGL和Vulkan背后的3D圖形標準組織Khronos所定義，這使得GLTF基本上成為3D模型的JPG格式：Web導出的通用標準。

    A-Frame和ThreeJS原生支持GLTF。盡管一些3D Web框架支持特定于平臺的模型格式，如FBX和OBJ，但幾乎每個框架都支持GLTF。如果有人要為你提供3D模型，你可以請求他們提供GLTF格式的版本。

    3. 使用GLTF文件

    要在A-Frame項目中使用GLTF，只需將其作為場景中的asset引用，然后通過gltf-model組件將其附加到實體即可。

    重新混合這個 故障項目示例 。其中存在一個包含鴨子模型的實體。

    當模型出現(xiàn)在場景后，你就可以使用a-animation組件執(zhí)行簡單的動畫。嘗試通過添加以下代碼來令鴨子旋轉：

    這將隨時間修改旋轉屬性。要令動畫更短或更快，請更改持續(xù)時間屬性。

    a-animation只能處理非常簡單的動畫。對于更復雜的移動，如沿路徑設置對象動畫，則可以使用Tween.js或aframe-animation-component。它們允許你將動畫鏈接到序列之中。但它們同樣存在限制。它們只能作為一個整體移動或旋轉對象。它們不能移動對象的某一部分，比如說人體模型的手臂。

    4. Internal Animation

    僅為模型一部分制作動畫實際上需要由創(chuàng)建模型的建模程序完成。大多數(shù)工具都內(nèi)置了動畫支持。你可以為奔跑，就座，跳躍，睡眠等操作添加標準動畫。這稱為internal animation或canned animation。然后，你可以使用另一個組件在項目中播放這些預制動畫：Don McCurdy的 animation-mixer組件 。

    首先將animation mixer組件添加到項目中，然后加載 這個模型 。

    現(xiàn)在更改實體以使用這個新模型，并設置旋轉和位置：

    將animation-mixer組件添加到實體之中：

    好了，現(xiàn)在這個大鍋開始冒泡了。

    5. 多個Clip

    如果模型中存在多個動畫又該如何？例如，這個 Hero Knight模型 包含多個用于站立，奔跑和砍殺等的動畫。我們將其稱為clip。要在它們之間進行選擇，你必須使用animation-mixer組件的clip屬性。

    但有一個問題。在選擇clip之前，我們需要找出模型中clip的名稱。我們需要一種工具來檢查模型并為我們提供相應的信息。我強烈推薦Don McCurdy的 glTF Viewer 。

    下載一個GLTF文件，將文件夾拖到這個網(wǎng)頁，然后點擊右上角控件的“Animation”部分。這將為你提供每個動畫的名稱，并支持你進行相應的的預覽。

    在考慮好想用的clip后，只需在animation-mixer組件設置clip屬性即可，比如說這樣：

    具體示例請點擊 這里查看 。

    6. 修改GLTF

    GLTF是一種輸出格式，類似于JPG和PNG。它們不適合編輯。如果你想編輯照片，可以使用Photoshop的原生文件格式PSD，并在完成后僅導出到JPG。GLTF與之類似。它們是輸出格式，這意味著我們無法直接修改它們。

    但我們可以做幾件事情。盡管我們通常無法改變材質和顏色，但我們可以修改位置，大小和旋轉。

    模型經(jīng)常都不會出現(xiàn)在我們想要的位置上。你可能希望它擺在場景的中心，但是當你瀏覽它的時候，對象在視覺上似乎總是偏向一側。這是因為模型在保存時沒有居中。你可以使用wrapper來解決問題。

    首先，在模型上設置位置，將其置放于中心。然后添加一個wrapper實體并使用它來定位對象。它看起來像這樣：

    7. 二進制GLTF

    GLTF文件實際上不是單個文件。相反，它們是包含JSON文檔的文件夾，然后還有一些圖片，以及其他包含幾何圖形，紋理，凹凸貼圖等的文件夾。其他文件夾都是通過一個相對URLS進行引用，因此你一般可以將文件夾轉儲到Web服務器上，直接引用GLTF文件，其余資源將正確加載。

    但如果你使用的是CDN而非自己的Web服務器，則可能無法控制相對URL，而且它們會出現(xiàn)問題。相反，你可以將GLTF轉換為名為GLB的二進制格式，一個包含所有資源的單個文件。然后，這個單個文件可以放在你的CDN上并直接引用。

    要獲取GLB文件，你可以直接從3D建模程序中導出它們，也可以使用工具將GLTF轉換為GLB。你可以使用這個非常好的基于網(wǎng)絡的轉換器： MakeGLB 。只需將包含GLTF文件的文件夾拖到頁面，然后它就會生成并下載GLB文件。接下來將GLB文件上傳到Glitch項目的Assets部分。然后選擇asset的URL并在主文檔中予以引用。

    當你把asset添加到glitch項目時，glitch會將-numbers增補至asset url。這在某種程度上混淆了GLTF加載器，后者將拒絕加載它。刪除-number部分，它應該就能正常工作了?；蛘?，將response-type =“arraybuffer”添加到a-asset-item，就像上面的代碼一樣。

    8. 從其他格式轉換

    最好使用創(chuàng)建模型的建模工具從其他格式轉換。許多建模者已經(jīng)可以導出GLTF或擁有可以執(zhí)行這一操作的插件。例如，這個鏈接是Blender的一個插件。如果建模者無法直接導出GLTF，或者你沒有創(chuàng)建它的建模軟件，則可以使用命令行工具來執(zhí)行這個操作。

    這個工具 可以將OBJ文件轉換至GLTF，而 這個工具 可以將其轉換至Collada文件。 這個工具 則可以轉換FBX文件，但我發(fā)現(xiàn)它比較難使用，因為它采用原生代碼。

    我已經(jīng)嘗試了其中幾種工具，并且它們的效果不錯，但由于原始格式和目標格式之間的差異，有時會出現(xiàn)錯誤。如果你有原始工具模型，如果可能請總是使用它的GLTF導出器。

    如果需要驗證生成的GLTF文件是否正確，可以嘗試使用此驗證器： glTF Validator 。

    這個官方的 GLTF頁面 同樣列出了一系列的轉換器和其他工具。

    9. 下一步

    隨著GLTF變得越來越流行，以GLTF格式查找模型將變得越來越容易。SketchFab會自動將其網(wǎng)站上的所有模型轉換為GLTF。嘗試搜索#medievalfantasyscene標簽，它們是Mozilla贊助的17年Sketchfab競賽的模型。

    Google Poly則是另一個GLTF文件來源。

    我還在OpenGameArt和Kenney的asset中找到了很多文件，特別是游戲文件。其中大多數(shù)都不是GLTF格式，因此你需要轉換它們。

    學習使用3D建模程序并非易事，而且超出了本文的范圍。但Blender這個完整的開源3D建模器是優(yōu)秀的入門工具，或者Tinkercad，一個來自Autodesk的免費網(wǎng)絡工具。

    10. 練習

    定位這個 imp_character 的三個實例。通過a-animation左右搖擺它們，令它們同步跳舞。

    在Sketchfab上尋找一個有創(chuàng)意的，包含動畫授權模型，將其轉換為GLB，然后將其上傳到項目的asset并使用它。

            文章來源：映維網(wǎng) 如轉載請標明出處

    原文鏈接 ： https://yivian.com/news/51717.html