WebXR

Neil Haddley • April 22, 2022

Create Augmented Reality Experiences.

3Dwebxraugmented-realitymixed-realitybrowser
← Back to Posts

I used WebXR, which supports both Virtual Reality (VR) and Augmented Reality (AR) and replaces the WebVR standard.

Scene with markers

I created a scene with two Augmented Reality markers. A sphere appears in the camera output when the Hiro marker is recognised, and a dinosaur when the '6' barcode marker is recognised. I added the barcode marker to a QR Code for convenience.

I created a QR Code

I created a QR Code

I used a barcode marker

I used a barcode marker

I used the Augmented Reality Marker

I used the Augmented Reality Marker

I used a Barcode Marker

I used a Barcode Marker

I embedded a Barcode Marker in a QR Code

I embedded a Barcode Marker in a QR Code

Scene

HTML
1<!DOCTYPE html>
2<html>
3<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
4<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
5
6<body style="margin : 0px; overflow: hidden;">
7    <a-scene embedded arjs="detectionMode: mono_and_matrix; matrixCodeType: 3x3;">
8
9        <a-marker preset="hiro">
10            <a-sphere position='0 0.5 0' material="opacity: 0.5" radius="1"></a-sphere>
11        </a-marker>
12
13        <a-marker type="barcode" value="6">
14            <a-entity position="0 0 0" scale="0.05 0.05 0.05"
15                gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf">
16            </a-entity>
17        </a-marker>
18        <a-entity camera></a-entity>
19    </a-scene>
20</body>
21
22</html>