AR 入門

要在 Web 上建立 AR 應用程式,你需要新增名為 AR.js 的新庫。首先載入 aframe,然後載入 AR.js.

Newt 你必須使用新增了 artoolkit 屬性的 aframe a-scene-tag 來設定你的場景。sourceType 必須是你的網路攝像頭。使用此功能也支援智慧手機的字型相機。

a-marker-camera-tag 在記錄的螢幕內標記一個代表影象的影象。在這種情況下,它是 marker.png。當相機檢測到此標記時,該框將顯示在標記上。

你可以在下面找到示例程式碼:

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
<script>
    THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'
</script>
<body>

    <a-scene artoolkit='sourceType: webcam;'>
        <a-box position='0 0 0.5' material='opacity: 0.5;'></a-box>
        <a-marker-camera preset='marker.png'></a-marker-camera>
    </a-scene>

</body>