Get started with ar.js CDN


<!DOCTYPE html>
<html>
<head>
    <meta name="description" content="AR.js example using A-Frame">
    <meta name="viewport" content="width=device-width, user-scalable=no, vr:enter_vr_mode_on_cardboard_trigger">
    <script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
    <script src="https://cdn.cdnhub.io/ar.js/2.2.2/aframe-ar.min.js"></script>
    <title>Get started with ar.js CDN - cdnhub.io</title>
    <style>
        body { margin: 0; }
        #canvas { width: 100%; height: 100%; }
    </style>
</head>
<body>
    <a-scene embedded arjs="debugUIEnabled: false; trackingOrigin: center; detectionMode: monocular;" vr-mode-ui="enabled: false">
        <a-entity id="marker" class="marker" arjs="marker: 'markerName';"></a-entity>
        <a-entity id="model" class="model" gltf-model="model.gltf" position="0 0.5 -1"></a-entity>
    </a-scene>
    <script>
        AFRAME.registerComponent('marker', {
            init: function () {
                var marker = this.el;
                marker.arComponent = new ARJSComponent(marker);
            }
        });

        class ARJSComponent {
            constructor(el) {
                this.el = el;
                this.markerName = this.el.attributes.marker.value;
                this.init();
            }

            init() {
                this.session = new AR.Session();
                this.session.run(this.onARResult.bind(this));
            }

            onARResult(result) {
                if (result.statusType === 'OK') {
                    this.el.object3D.position.set(result.pose.position.x, result.pose.position.y, result.pose.position.z);
                    this.el.object3D.rotation.set(result.pose.rotation.x, result.pose.rotation.y, result.pose.rotation.z);
                    this.session.removeListener('arresult', this.onARResult);
                    this.session.on('arresult', this.onARResult);
                    this.el.component.object3D.visible = true;
                    this.model.object3D.visible = true;
                }
            }
        }

        document.addEventListener('DOMContentLoaded', function () {
            var marker = document.querySelector('#marker');
            var model = document.querySelector('#model');
        });
    </script>
</body>
</html>
Get started with ar.js CDN

Stable version

How to start using ar.js CDN

All versions
