DemiSel
/
encantar-js


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148
							<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1, maximum-scale=1">
        <title>encantar.js WebAR demo with A-Frame</title>
        <link href="../assets/demo.css" rel="stylesheet">
        <script src="../../dist/encantar.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/aframe@1.6.0/dist/aframe-v1.6.0.min.js"></script>
        <script src="../../plugins/aframe-with-encantar.js"></script>
        <script src="../../addons/aframe/ar-scan-gimmick.js"></script>
        <script src="../../addons/aframe/gltf-anim.js"></script>
    </head>
    <body>

        <!-- The AR scene -->
        <a-scene encantar="stats: true; gizmos: true" loading-screen="enabled: false">

            <!--
            +============================+
            | Let's set up an AR session |
            +============================+
            -->

            <!-- The inputs that will feed the AR engine -->
            <ar-sources>

                <!-- Use a webcam -->
                <!--
                <ar-camera-source></ar-camera-source>
                -->

                <!-- Use a video element -->
                <ar-video-source video="#my-video"></ar-video-source>

            </ar-sources>

            <!-- The trackers we'll be using in AR -->
            <ar-trackers>

                <!-- We'll track images -->
                <ar-image-tracker>

                    <!-- List the images that you intend to track
                         Make sure to follow the guidelines for images (see the docs) -->
                    <ar-reference-image name="mage" src="../assets/mage.webp"></ar-reference-image>
                    <ar-reference-image name="cat" src="../assets/cat.webp"></ar-reference-image>

                </ar-image-tracker>

            </ar-trackers>

            <!-- The AR viewport -->
            <ar-viewport>

                <!-- A 2D overlay displayed in front of the AR scene -->
                <ar-hud>

                    <!-- The info button -->
                    <a id="info" href="NOTICE.html" draggable="false"></a>

                    <!-- The like button -->
                    <a id="like" href="../assets/promo.html" draggable="false"></a>

                    <!-- The scan gimmick -->
                    <ar-scan-gimmick opacity="0.75"></ar-scan-gimmick>

                </ar-hud>

            </ar-viewport>


            <!--
            +=================================================+
            | Now let's create the virtual elements           |
            | Whatever you add to <ar-root> will appear in AR |
            +=================================================+
            -->

            <!-- A 3D camera adapted for AR -->
            <ar-camera></ar-camera>

            <!-- Light -->
            <a-light type="ambient" intensity="1.0"></a-light>

            <!-- The mage -->
            <ar-root reference-image="mage">

                <!-- Switch from top view to front view -->
                <a-entity rotation="-90 0 0" position="0 -0.8 0">

                    <!-- 3D model -->
                    <a-entity
                        gltf-model="#mage-model" gltf-anim="clip: Idle"
                        rotation="90 0 0" scale="0.7 0.7 0.7">
                    </a-entity>

                    <!-- Magic circle -->
                    <a-plane width="4" height="4"
                        material="src: #magic-circle; color: #beefff; side: double; shader: flat; transparent: true; opacity: 1"
                        animation="property: object3D.rotation.z; from: 360; to: 0; dur: 8000; loop: true; easing: linear">
                    </a-plane>

                </a-entity>

            </ar-root>

            <!-- The cat -->
            <ar-root reference-image="cat">
                <a-entity rotation="-90 0 0" position="0 -0.8 0">
                    <a-entity
                        gltf-model="#cat-model" gltf-anim="clip: Cheer"
                        rotation="90 0 0" scale="0.7 0.7 0.7">
                    </a-entity>

                    <a-plane width="4" height="4"
                        material="src: #magic-circle; color: #ffa; side: double; shader: flat; transparent: true; opacity: 1"
                        animation="property: object3D.rotation.z; from: 360; to: 0; dur: 8000; loop: true; easing: linear">
                    </a-plane>

                    <a-entity position="0 -0.5 2">
                        <a-plane width="3" height="1.5" rotation="90 0 0"
                            material="src: #it-works; color: #fff; side: double; shader: flat; transparent: true; opacity: 1">
                        </a-plane>
                    </a-entity>
                </a-entity>
            </ar-root>

            <!-- Declare external media files here -->
            <a-assets>
                <a-asset-item id="cat-model" src="../assets/cat.glb"></a-asset-item>
                <a-asset-item id="mage-model" src="../assets/mage.glb"></a-asset-item>
                <img id="magic-circle" src="../assets/magic-circle.png">
                <img id="it-works" src="../assets/it-works.png">
            </a-assets>

        </a-scene>

        <!-- Feed the Image Tracker with this video -->
        <video id="my-video" hidden muted loop playsinline autoplay>
            <source src="../assets/my-video.webm" type="video/webm" />
            <source src="../assets/my-video.mp4" type="video/mp4" />
        </video>

    </body>
</html>