diff --git a/mind-ar/index.html b/mind-ar/index.html index f96ca9fb1d16c3c21d3fc66de7075ad62ecd5b3b..0a9cba5d8710b43740b03e1be1b77a0c05577154 100644 --- a/mind-ar/index.html +++ b/mind-ar/index.html @@ -4,40 +4,100 @@ <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.1.5/dist/mindar-image.prod.js"></script> <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/mind-ar@1.1.5/dist/mindar-image-aframe.prod.js"></script> + <style> + body { + font-family: system-ui; + margin: 0; + height: 100svh; + width: 100svw; + } + + .ar-button { + display: flex; + justify-content: center; + align-items: center; + padding: 30px 20px; + border: none; + background: #ff2849; + border-radius: 20px; + cursor: pointer; + position: absolute; + width: 250px; + bottom: 50px; + left: calc((100svw / 2) - (290px / 2)); + } + + .label { + font-size: 20px; + font-weight: bold; + color: #fff; + font-family: sans-serif; + letter-spacing: 1px; + } + + .description { + position: absolute; + top: 50px; + font-size: 25px; + text-align: center; + } + </style> </head> <body> - <a-scene - mindar-image="imageTargetSrc: ./targets.mind;" - vr-mode-ui="enabled: false" - device-orientation-permission-ui="enabled: false" - > - <a-camera position="0 0 0" look-controls="enabled: false"></a-camera> - <a-assets> - <img - id="card" - src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.2.2/examples/image-tracking/assets/card-example/card.png" - /> - <a-asset-item - id="avatarModel" - src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.2.2/examples/image-tracking/assets/card-example/softmind/scene.gltf" - ></a-asset-item> - </a-assets> - <a-entity mindar-image-target="targetIndex: 0"> - <a-plane - src="#card" - position="0 0 0" - height="0.552" - width="1" - rotation="0 0 0" - ></a-plane> - <a-gltf-model - rotation="0 0 0 " - position="0 0 0.1" - scale="0.005 0.005 0.005" - src="#avatarModel" - animation="property: position; to: 0 0.1 0.1; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate" - ></a-gltf-model> - </a-entity> - </a-scene> + <template id="ar-scene-template"> + <a-scene + id="ar-scene" + mindar-image="imageTargetSrc: ./targets.mind;" + vr-mode-ui="enabled: false" + device-orientation-permission-ui="enabled: false" + > + <a-camera position="0 0 0" look-controls="enabled: false"></a-camera> + <a-assets> + <img + id="card" + src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.2.2/examples/image-tracking/assets/card-example/card.png" + /> + <a-asset-item + id="avatarModel" + src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.2.2/examples/image-tracking/assets/card-example/softmind/scene.gltf" + ></a-asset-item> + </a-assets> + <a-entity mindar-image-target="targetIndex: 0"> + <a-plane + src="#card" + position="0 0 0" + height="0.552" + width="1" + rotation="0 0 0" + ></a-plane> + <a-gltf-model + rotation="0 0 0 " + position="0 0 0.1" + scale="0.005 0.005 0.005" + src="#avatarModel" + animation="property: position; to: 0 0.1 0.1; dur: 1000; easing: easeInOutQuad; loop: true; dir: alternate" + ></a-gltf-model> + </a-entity> + </a-scene> + </template> + <div class="container" id="welcome-page"> + <div class="description"> + <div>Bienvenue à l'exposition "Hoelympique" !</div> + <div>Pour démarrer, cliquez sur le bouton "Démarrer l'expérience !"</div> + </div> + <div class="ar-button"> + <span class="label">Démarrer l'expérience !</span> + </div> + </div> </body> + <footer> + <script> + const button = document.querySelector(".ar-button"); + button.addEventListener("click", () => { + const template = document.getElementById("ar-scene-template"); + document.querySelector("body").appendChild(template.content.cloneNode(true)); + document.querySelector("#welcome-page").remove(); + }) + </script> + </footer> </html>