用AR.js做一個讓另對方 喔喔喔喔! 的小卡片吧!
2019年4月7日 18:39
Medium好讀版:
痾 希望大家別鞭太用力啊orz 在這邊分享不會對我本身有甚麼利益 單純就是覺得這個東西不是非常難 但滿有趣的 大家可以小小的實作看看 送給自己重要的人 (跪 但如果有錯誤的歡迎指出!
早上起床 一看到臉書通知 啊!! 今天是女友生日啊 完蛋了 完全沒準備禮物 連個卡片都沒寫 別擔心 我們可以用AR.js 用短短幾行的程式碼 做出一個看起來挺用心(? 的卡片
🌟需求
1. 對方打開卡片時 可以用手機呈現AR的小彩蛋 讓卡片更有趣些
2. 因為女友很怕麻煩 最好能讓AR效果可以呈現在網頁上 讓對方打開網頁即可使用 而不是還要載APP
3. 程式碼要短 因為下午就要慶祝女友生日了(被打
🌟你將會用到
AR.js: Web AR的套件 利用Three.js, A-Frame.js, ARtoolkit 等技術來撰寫 並且號稱 「快速、Web跨平台、開源、高適用性(只要帶有WebGL or WebRtc 都可使用)」
Three.js : 與html5 的3d引擎溝通的js套件
A-Frame.js: 將Three.js 的API 在封裝html tag的js套件
ARtoolkit: 辨識圖片marker
Heroku: 一個雲端部屬的平台 我們可以將網站、Web應用等等部署至此
Git: 版本控管工具 我們將會使用Git將網頁部屬至Heroku
Heroku與Git這篇文章就不多作介紹了 大家可以看卡米狗大大這篇!
🌟整體概念
大致上是 手機開啟瀏覽器> AR.js程序開始 >ARToolKit辨識到圖片marker> A-Frame.js 開始呼叫Three.js 渲染3D模型 > 在畫面上顯示
🌟實作
👉3D模型首先我們先到 下載自己喜歡的3D模型 今天剛好女友喜歡鴨子 所以我們就載一個鴨子吧!
1. 搜尋”duck”
2. 選擇”Downloadable” (如果不選擇這個 很容易找到沒有載點的模型QQ)
3. 選擇下方"Download 3D Model"
4. 下載glTF格式 (A-frame提供glTF, OBJ兩種格式 官網建議使用glTF)
👉製作Marker
我們希望對方能夠直接掃描Marker進入網頁 所以我們必須讓Marker同時也是QR code
1. 首先我們先到 製作qrcode 我們之後將網站上傳至heroku的網址會是 "https://<你得專案名稱>.herokuapp.com/" 雖然網站還沒做出來 但我們先將網址預先輸入進QR code
2. 上傳想要呈現給對方的的小LOGO 因為我想要給女友小寶物的感覺 所以我上傳了寶箱的圖片
3. 點選Create QR Code 並且Download PNG
4. AR.js 的作者有提供此網頁 讓我們製作Marker 我們點選”UPLOAD”將我們QR code上傳
5. 下載”DOWNLOAD MARKER” 得到"pattern-marker.patt" 這個檔案將會在ARToolkit裡面使用
6. 下載"DOWNLOAD IMAGE" 得到”marker.png” 這張圖片我們就可以列印起來 並貼到卡片上了~
👉寫網頁
1. 第1~2行 我們先創建專案資料夾 並且進入
2. 第3~5行 初始化git 並且登入heroku 創建一個heroku app
3. 第6行 設定heroku app的使用語言為nodejs
4. 進入專案資料夾 創建package.json 把我們nodejs的package設定好
5. 創建res資料夾 將我們剛剛下載的3D模型解壓縮放入、下載的Marker也都放入
6. 創建index.html檔案 並且把這些程式碼都貼上~ 它的內容是:
第1~3行: 把js套件都引入進來
第6行: 使用A-frame的html tag 新增一個a-scene攝像頭 並且把AR.js崁入
第7行: 標記Marker 如果標記的Marker出現在攝像頭裡就會執行下方的事情
第8行: 新增你想要跟對方說的話
第9行: 新增3D模型
現在 我們的資料夾會長這樣 大家可以檢查一下
7. 將網頁部屬至heroku 我們可以再輸入"heroku open" 檢查網頁是否跟當初輸入的QR code 網址相同 另外 也可以拿手機測試開啟Marker圖片測試看看
大家可以拿手機看看成品 可以啦~~
🌟做卡片(這才是最重要的啊!!)
大家有注意到Marker 我並沒有用自訂的嗎 其實是因為當天真的太趕了(悲劇 真的沒有時間把自訂Marker做出來 可是剛剛的影片大家可以知道自訂Marker是可以用的 所以大家放心用自訂Marker吧!
🌟最後成品
那最後 女友拿到禮物有沒有覺得開心呢?! 出乎意料還不錯… 哈哈 一天又平安的過去了 感謝JS的努力
如果有錯誤或者可改善的地方 歡迎到我的Medium 指出糾正 謝謝 讓這篇文章更完整
