國立勤益科技大學

用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
指出糾正 謝謝 讓這篇文章更完整
12
回應 2
文章資訊
共 2 則回應
國立高雄應用科技大學
哦哦哦 真滴好酷, 原PO有缺男友嗎?😍 沒 沒事 被盜XD
國立屏東大學 商業自動化與管理學系
寫網頁的步驟開始不太懂⋯ 但好想學會啊!