簡單使用 AR.js

slide: https://hackmd.io/p/u11Q9nEpTHOuBH1MoI6AKg

---

待會有實作項目

請準備手機和電腦!

---

DEMO

Resources :

• 顯示 png 範例 (手機看網頁)
  • https://storage.googleapis.com/line-bot–user-info/ar/png/index.html
• 顯示 gltf 範例 (手機看網頁)
  • https://storage.googleapis.com/line-bot–user-info/ar/gltf/index.html
• DEMO 用 Marker 圖片 (電腦下載)
  • https://storage.googleapis.com/line-bot–user-info/ar/marker.png

---

DEMO

Steps :

1. 用電腦把 Marker 圖片打開
2. 用手機打開 chrome 進範例網址
3. 網頁會彈出是否允許攝影機權限，請允許 ( 若不行，請檢查網址前的鎖頭 )
4. 手機網頁就會顯示 AR 圖形，可用手指放大、縮小、拉近、拉遠

---

自已動手做一個到 GitHub

---

AR.js Studio

會幫你產生相關應用
https://ar-js-org.github.io/studio/

---

應用模式

1. Location-based
   • https://www.youtube.com/watch?v=RpCVs-sTKJU
2. Marker-based
   • 剛剛的DEMO

---

3D物件

https://sketchfab.com/3d-models/

• 需要註冊
• Downloadable 打勾找
• LICENSES 選 CC BY 過濾付費
• 作者頭像下有 Download 3D Model 能下載
• 選 glTF 下載後，不用解壓，直接上傳就好

---

匯出方式

1. Publish on github

   • 會需要登入 github 拿授權
   • 它會幫你建一個專案並做成 GitHub Pages
   • https://puff-tw.github.io/AR-Mariomfthdi/

2. Download package

   • 會給 ZIP (HTML及VR檔案)，部署網站使用。(本機打開 HTML 沒作用)

---

Thank you!

---