# 簡單使用 AR.js
<!-- Put the link to this slide here so people can follow -->
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 :heart:
---
#### 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 沒作用)
---
# :100: :muscle: :tada:
### Thank you! :sheep:
---
{"metaMigratedAt":"2023-06-17T13:38:48.018Z","metaMigratedFrom":"YAML","title":"簡單使用 AR.js","breaks":true,"description":"View the slide with \"Slide Mode\".","contributors":"[{\"id\":\"9c3b7131-035b-4dec-91be-83eb13e0dd4d\",\"add\":3681,\"del\":2331}]"}