Vr、Ar，最近這幾年想必大家都一直廣泛聽到這兩個詞，而這兩個差別在哪裡呢

1. Vr 全名為 Virtual Reality，代表說你看到的東西是由電腦模擬出來，通常都會戴上設備來讓體驗更真實，應用在瀏覽器上比較有名的套件有 aframe
2. Ar 全名為 Augmented Reality，將虛擬的物體投射到實體世界，所以看到的是部份實體部分虛擬，最有名的應該就是 Pokemon Go，瀏覽器上的套件有 AR.js

當然最近名詞越來越多，一堆 ?r 詳細定義這邊就不多說了，因為想研究的還是跟互動比較相關，所以今天就來介紹一下 AR 囉。

AR.js

AR.js 封裝了底層的實作，例如說影像辨識、投影位置、模型等等，讓開發者不必去在意底層的實作。而基本上互動的方式可以分為兩大類

1. Marker Based，呈現的方式是要掃描特定標記才會出現，概念有點像是掃 QR code
2. Location Based，依據 GPS 位置，就是上面提到的 Pokemon Go 啦

之前 AR.js 只支援第一種互動方式，不過最近好像剛出了一版是可以支援第二種，有興趣的可以去研究一下，這邊只會介紹一下第一種互動。

實作

現在要使用似乎只能直接載入，無法安裝

<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://raw.githack.com/jeromeetienne/AR.js/2.0.0/aframe/build/aframe-ar.js"></script>

接著在頁面中使用，這邊基本上 a 開頭的標籤都是來自 aframe 除了 a-marker 是特別延伸出來的，詳細參數可以參考 這裡 ，aframe 的底層是使用了 three.js 這邊拿來的用途是投影出模型。

  <a-scene
    embedded
    arjs
  >
    <a-marker preset="hiro">
      <a-box
        position='0 0.5 0'
        material='color: yellow;'
      ></a-box>
    </a-marker>
    <a-entity camera></a-entity>
  </a-scene>

在 a-marker 裡面的物件會在偵測到設定到的 marker 後顯示出來，目前是直接秀出一個柱狀體。marker 可以設定要哪種形狀，官方 有提供一個可以製作的網頁，而因為我們只是示範，所以直接拿預設的來使用就好，所以上方的 peeset 是官方預設包在裡面的圖，如果是自己要設定的話記得要修改一些其他參數。所以我們在這邊 拿到剛剛設定的 marker 圖片，看是要印出來用手機掃描或者是直接在手機上顯示用電腦鏡頭掃描都可以，用手機掃描效果應該會比較好，但我們簡單做就直接顯示在手機上。所以顯示會如下

所以如果要秀其他東西的話，我們只要更改 a-marker 裡面就好，所以我們就去找一些 3D 模型吧，官方推薦幾個網站可以去使用，sketchfab、clara、3dwarehouse 大家可以挑選一下，下載的格式推薦使用 gltf，建議不要下載太複雜檔案太大的，不然載入會有點久，選好一個喜歡的或者自己做出來之後就可以套用進去囉

<a-entity
    position='0 0 0'
    scale="0.1 0.1 0.1"
    gltf-model="url(assets//scene.gltf)"
  ></a-entity>

這邊要注意的是 scale 可能會需要調整，要看每個模型各自的設定，所以如果是沒看到可能是已經超出鏡頭視角外了。我們來看看我們選的模型吧！

其實用手機顯示有一個蠻大的缺點就是很容易就會失去投影，如果是採用列印出來，手機掃描的話，效果應該會好很多，像現在旋轉都沒辦法好好使用。

小結

感謝大神們的努力，讓我們可以用短短幾行程式碼就可以做出一個 ar 的效果，在網路速度越來越快及圖像辨識越來越發達的未來，希望 ar 可以在瀏覽器有更多實際的應用，明天見囉！