在A-frame中導入自己的3D Model

在A-frame這個工具中遇到了許多奇怪且無法解釋的glTF相容問題，寫一篇文解救遇到此問題的人。

使用工具有：

1. github-page（放專案的地方）
2. Sketchup （製作3D Model）
3. glTF Export（輸出標準glTF 2.0的模型）

在A-Frame 學院的12.3章節中，教材有提到：

加入 3D 模型 — 上傳 3D 模型

如果你自己建了個 3D 模型，由於當中牽扯許多相互參照的素材或檔案，想要丟上 CDN 來使用可能有點麻煩。 目前我們發現最簡單的方法是直接把東西丟進 GitHub repo、將該 repo 的 master 分支發布為 GitHub Pages， 接著使用 rawgit.com 來存取。或者，也可以選擇丟上 Amazon S3。日後這一頁會加上其他相關資訊。

好，在官方推薦的標準glTF 3D模型下載平台中，推薦了Sketchfab，我們試著下載一個模型並且放在專案裡

比如說拿這個頭來比喻

放到專案資料夾中

在index.html裡放入剛剛的骷髏頭

Guess what?

得到了一片空白跟鬼才看得懂的error message

經過多次測試，證實從sketchfab下載的glTF跟A-Frame是不相容的，唯一的解法是：從sketchfab下載原始檔（Obj或是其他檔案類型），丟進Sketchup，再用外掛glTF Export輸出成glTF，就能成功。

還有一點很重要，確認你的aframe是7.1以後的版本

<script src=”https://aframe.io/releases/0.7.1/aframe.min.js"></script>

以下是從sketchfab抓的模型

從Sketchup warehouse抓的也可以

大致上從Sketchup轉存出來的glTF效果都不錯，不用考慮obj綁貼圖材質上傳到空間後的種種錯誤（有的model會掉材質:(），一個檔案處理所有的事。

有閒再來研究glTF 1.0跟2.0的差別。