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

    1. 什么是3D模型

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

    VR中的所有一切都包含幾何圖形。這種幾何圖形定義了形狀。它們可能看起來(lái)像是抽象的形狀，比如說(shuō)球體或圓柱體，但其背后是由三角形組成，因?yàn)橹挥羞@樣計(jì)算機(jī)才知道如何進(jìn)行繪制。使用a-sphere這樣的A-Frame組件來(lái)將抽象形狀轉(zhuǎn)換為三角形。然而，有些形狀過(guò)于復(fù)雜，無(wú)法用簡(jiǎn)單的數(shù)學(xué)進(jìn)行描述。所以，我們必須使用3D建模工具來(lái)繪制這些形狀。

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

    2. 什么是GLTF？

    GLTF代表Graphics Language Transmission Format（圖形語(yǔ)言傳輸格式）。這種跨平臺(tái)格式已成為Web上的3D對(duì)象標(biāo)準(zhǔn)。它由OpenGL和Vulkan背后的3D圖形標(biāo)準(zhǔn)組織Khronos所定義，這使得GLTF基本上成為3D模型的JPG格式：Web導(dǎo)出的通用標(biāo)準(zhǔn)。

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

    3. 使用GLTF文件

    要在A-Frame項(xiàng)目中使用GLTF，只需將其作為場(chǎng)景中的asset引用，然后通過(guò)gltf-model組件將其附加到實(shí)體即可。

    重新混合這個(gè) 故障項(xiàng)目示例 。其中存在一個(gè)包含鴨子模型的實(shí)體。

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

    這將隨時(shí)間修改旋轉(zhuǎn)屬性。要令動(dòng)畫(huà)更短或更快，請(qǐng)更改持續(xù)時(shí)間屬性。

    a-animation只能處理非常簡(jiǎn)單的動(dòng)畫(huà)。對(duì)于更復(fù)雜的移動(dòng)，如沿路徑設(shè)置對(duì)象動(dòng)畫(huà)，則可以使用Tween.js或aframe-animation-component。它們?cè)试S你將動(dòng)畫(huà)鏈接到序列之中。但它們同樣存在限制。它們只能作為一個(gè)整體移動(dòng)或旋轉(zhuǎn)對(duì)象。它們不能移動(dòng)對(duì)象的某一部分，比如說(shuō)人體模型的手臂。

    4. Internal Animation

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

    首先將animation mixer組件添加到項(xiàng)目中，然后加載 這個(gè)模型 。

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

    將animation-mixer組件添加到實(shí)體之中：

    好了，現(xiàn)在這個(gè)大鍋開(kāi)始冒泡了。

    5. 多個(gè)Clip

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

    但有一個(gè)問(wèn)題。在選擇clip之前，我們需要找出模型中clip的名稱(chēng)。我們需要一種工具來(lái)檢查模型并為我們提供相應(yīng)的信息。我強(qiáng)烈推薦Don McCurdy的 glTF Viewer 。

    下載一個(gè)GLTF文件，將文件夾拖到這個(gè)網(wǎng)頁(yè)，然后點(diǎn)擊右上角控件的“Animation”部分。這將為你提供每個(gè)動(dòng)畫(huà)的名稱(chēng)，并支持你進(jìn)行相應(yīng)的的預(yù)覽。

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

    具體示例請(qǐng)點(diǎn)擊 這里查看 。

    6. 修改GLTF

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

    但我們可以做幾件事情。盡管我們通常無(wú)法改變材質(zhì)和顏色，但我們可以修改位置，大小和旋轉(zhuǎn)。

    模型經(jīng)常都不會(huì)出現(xiàn)在我們想要的位置上。你可能希望它擺在場(chǎng)景的中心，但是當(dāng)你瀏覽它的時(shí)候，對(duì)象在視覺(jué)上似乎總是偏向一側(cè)。這是因?yàn)槟Ｐ驮诒４鏁r(shí)沒(méi)有居中。你可以使用wrapper來(lái)解決問(wèn)題。

    首先，在模型上設(shè)置位置，將其置放于中心。然后添加一個(gè)wrapper實(shí)體并使用它來(lái)定位對(duì)象。它看起來(lái)像這樣：

    7. 二進(jìn)制GLTF

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

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

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

    當(dāng)你把a(bǔ)sset添加到glitch項(xiàng)目時(shí)，glitch會(huì)將-numbers增補(bǔ)至asset url。這在某種程度上混淆了GLTF加載器，后者將拒絕加載它。刪除-number部分，它應(yīng)該就能正常工作了。或者，將response-type =“arraybuffer”添加到a-asset-item，就像上面的代碼一樣。

    8. 從其他格式轉(zhuǎn)換

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

    這個(gè)工具 可以將OBJ文件轉(zhuǎn)換至GLTF，而 這個(gè)工具 可以將其轉(zhuǎn)換至Collada文件。 這個(gè)工具 則可以轉(zhuǎn)換FBX文件，但我發(fā)現(xiàn)它比較難使用，因?yàn)樗捎迷a。

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

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

    這個(gè)官方的 GLTF頁(yè)面 同樣列出了一系列的轉(zhuǎn)換器和其他工具。

    9. 下一步

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

    Google Poly則是另一個(gè)GLTF文件來(lái)源。

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

    學(xué)習(xí)使用3D建模程序并非易事，而且超出了本文的范圍。但Blender這個(gè)完整的開(kāi)源3D建模器是優(yōu)秀的入門(mén)工具，或者Tinkercad，一個(gè)來(lái)自Autodesk的免費(fèi)網(wǎng)絡(luò)工具。

    10. 練習(xí)

    定位這個(gè) imp_character 的三個(gè)實(shí)例。通過(guò)a-animation左右搖擺它們，令它們同步跳舞。

    在Sketchfab上尋找一個(gè)有創(chuàng)意的，包含動(dòng)畫(huà)授權(quán)模型，將其轉(zhuǎn)換為GLB，然后將其上傳到項(xiàng)目的asset并使用它。

            文章來(lái)源：映維網(wǎng) 如轉(zhuǎn)載請(qǐng)標(biāo)明出處

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