【AR.js】利用A-Frame.js來做個生日小卡片吧

Aug 11, 2019 · 2 min read · ar heroku javascript ·

話說，版主1111光棍節已經過到不想過了，早就從魔法師轉生成大魔導士了，所以本魯今年的願望這是脫單，利用高級打字工的優勢，利用AR.js / A-Frame.js做一張令心儀的人會喔喔喔喔的生日小卡片吧，相信版主一定會成功的，話不多說，做就對了。

做一個長這樣的網頁

製作過程

新增專案

新增一個等一下要放網頁的專案APP，至於heroku CLI的安裝過程就不再贅述。

專案連結

與剛剛產生的專案做連結，

heroku login -i                   # 登入heroku
git init                          # 初始化git資料庫
heroku git:remote -a <專案名稱>    # 跟heroku的git做相連

npm init                          # 產生package.json

git add .                         # 加入所有變動的資料
git commit -am "add index.html"   # 加上commit訊息
git push heroku master            # 上傳
heroku open                       # 開啟網頁

其中以下為相關的Code，不過此時開啟網頁也是沒有反應的。maker的型式是內建的Hiro。

<!--index.html-->
<!doctype HTML>
<html>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.7/aframe/build/aframe-ar.js"></script>
  <body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs>
      <a-marker preset="hiro">  <!--maker的型式是內建的Hiro-->
          <a-box position='0 0.5 0' material='color: yellow;'></a-box>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

{
  "name": "happybirthday0909",
  "version": "1.0.0",
  "description": "happybirthday0909",
  "scripts": {
    "start": "harp server --port $PORT"
  },
  "dependencies": {
    "harp": "*"
  }
}

AR測試

可以到「https://<專案名稱>.herokuapp.com」去做AR的測試，其中鏡頭要去對一張上面有Hiro的Maker就可以看到有一塊黃色的正方形在上面。

產生自己的Maker

因為我們做的是網頁，如果真的把QRCdoe做成Maker不就更好了嗎？別急，作者早就幫我們想好了喲。首先把「網址 => QRCode」，然後再把產生的「QRCode => Maker / Pattern」，把Code改好之後，再上傳git。

<!--index.html-->
<!doctype HTML>
<html>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.7/aframe/build/aframe-ar.js"></script>
  <body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false;'>
      <a-marker preset='custom' type='pattern' url='model/pattern-qr-code.patt'>  <!--把maker換成是自定義的pattern-->
          <a-box position='0 0.5 0' material='color: yellow;'></a-box>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

git add .
git commit -am "add pattern"
git push heroku master

QRCode測試

這次可以直接使用剛才產生的QRCode去連網頁了喲，其中鏡頭要去對自己產生的Maker就可以看到一塊黃色的正方形在上面。

下載3D模型

在這裡呢，可以選擇自己想要的3D模型，我選的是一個3D蛋糕，記得要下載glTF格式的，解開之後會有「bin / glTF」的檔案。

放入3D模型

接下來就是把剛剛下載的3D模型拿來使用，然後上傳git。

<!--index.html-->
<!doctype HTML>
<html>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.7/aframe/build/aframe-ar.js"></script>
  <body style='margin : 0px; overflow: hidden;'>
    <a-scene embedded arjs='sourceType: webcam; debugUIEnabled: false;'>
      <a-marker preset='custom' type='pattern' url='model/pattern-qr-code.patt'>
        <a-entity text="width: 5; value:Happy Birthday To You" position='1.4 1.8 0'></a-entity>                   <!--加上文字-->
        <a-entity id='gltf' gltf-model="url(model/scene.gltf)" position='0 0.5 0' scale='0.2 0.2 0.2'></a-entity> <!--加上3D模型-->
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

git add .
git commit -am "add gltf"
git push heroku master

成果測試

範例程式碼下載

後記

其實AR互動還滿有趣的，而且原來A-Frame.js那麼強大啊，有空多多學學它。