髒桶子
髒桶子
Apr 6 · 6 min read

早上起床 一看到臉書通知 啊!! 今天是女友生日啊 完蛋了 完全沒準備禮物 連個卡片都沒寫 別擔心 我們可以用AR.js 用短短幾行的程式碼 做出一個看起來挺用心(? 的卡片

需求

  • 對方打開卡片時 可以用手機呈現AR的小彩蛋 讓卡片更有趣些
  • 因為女友很怕麻煩 最好能讓AR效果可以呈現在網頁上 讓對方打開網頁即可使用 而不是還要載APP
  • 程式碼要短 因為下午就要慶祝女友生日了(被打

你將會用到

  • 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模型

首先我們先到 https://sketchfab.com/下載自己喜歡的3D模型 今天剛好女友喜歡鴨子 所以我們就載一個鴨子吧!

  1. 搜尋”duck”
  2. 選擇”Downloadable” (如果不選擇這個 很容易找到沒有載點的模型QQ)

3. 選擇下方"Download 3D Model"

4. 下載glTF格式 (A-frame提供glTF, OBJ兩種格式 官網建議使用glTF)

  • 製作Marker

我們希望對方能夠直接掃描Marker進入網頁 所以我們必須讓Marker同時也是QR code

  1. 首先我們先到qrcode-monkey製作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是可以用的 所以大家放心用自訂Marker吧!

最後成品

那最後 女友拿到禮物有沒有覺得開心呢?! 出乎意料還不錯… 哈哈 一天又平安的過去了 感謝JS的努力

如果有錯誤或者可改善的地方 歡迎指出 謝謝 讓這篇文章更完整

其他應用

  • Tracking.js: 可以用來追蹤臉、手、眼睛等等 並且轉換成座標 如果有不同的使用情境 例如 要看到臉出現 才出現AR效果 那你就可以使用它

參考

髒桶子~

分享一些雜七雜八的 希望能夠幫助自己 也幫助別人

髒桶子

Written by

髒桶子

一個喜歡把複雜的事情 透過簡單的方式處理的小工程師

髒桶子~

分享一些雜七雜八的 希望能夠幫助自己 也幫助別人

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade