DemiSel
/
encantar-js


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
							<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>encantAR.js WebAR demo with A-Frame</title>
        <link href="demo.css" rel="stylesheet">
        <script src="../../dist/encantar.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/aframe@1.4.2/dist/aframe-v1.4.2.min.js"></script>
        <script src="../assets/aframe-particle-system-component.min.js"></script>
        <script src="demo.js"></script>
        <script src="../../plugins/aframe-with-encantar.js"></script>
    </head>
    <body>
        <div id="ar-viewport">
            <div id="ar-hud" hidden>
                <img id="scan" src="../assets/scan.png">
                <a id="about" href="NOTICE.html"></a>
            </div>
        </div>
        <img id="my-reference-image" src="../assets/my-reference-image.webp" hidden>

        <!-- This is a scene -->
        <a-scene ar-scene>
            <a-camera ar-camera></a-camera>

            <!-- Whatever you add to <ar-root> will appear in AR -->
            <ar-root>

                <!-- Ground plane -->
                <a-plane position="0 -0.5 -0.5" rotation="-90 0 0" width="2" height="1" color="indigo">

                    <!-- 3D model -->
                    <a-entity gltf-model="#my-3d-model"></a-entity>

                    <!-- Particles -->
                    <a-entity rotation="90 0 0">
                        <a-entity position="0.75 0 0" particle-system="texture: ../assets/particle.png; color: #03f; opacity: 0.33; size: 20; maxAge: 0.64; velocityValue: 0 6.5 0; velocitySpread: 0 0 0; accelerationSpread: 2 0 2; particleCount: 2000"></a-entity>
                        <a-entity position="-0.75 0 0" particle-system="texture: ../assets/particle.png; color: #f70; opacity: 0.33; size: 20; maxAge: 0.64; velocityValue: 0 6.5 0; velocitySpread: 0 0 0; accelerationSpread: 2 0 2; particleCount: 2000"></a-entity>
                    </a-entity>

                    <!-- Rotating text -->
                    <a-entity animation="property: rotation.z; from: 0; to: 360; dur: 2000; loop: true; easing: linear">
                        <a-text value="It works!" font="mozillavr" color="#fe3" scale="-1 -1 1" rotation="-90 0 0" position="0 0.40 1" align="center"></a-text>
                        <a-text value="Cool!" font="mozillavr" color="#8ef" scale="1 1 1" rotation="90 0 0" position="0 -0.40 1" align="center"></a-text>
                    </a-entity>

                </a-plane>

            </ar-root>

            <!-- Declare external media files here -->
            <a-assets>
                <a-asset-item id="my-3d-model" src="../assets/my-3d-model.glb"></a-asset-item>
            </a-assets>
        </a-scene>
    </body>
</html>