Skip to content
Snippets Groups Projects
Commit 16c9d9f5 authored by Jonathan Hervieux's avatar Jonathan Hervieux
Browse files

feat: welcome page mindar

parent eeca3446
Branches
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 93 additions and 33 deletions
mind-ar/index.html
+ 93
− 33
View file @ 16c9d9f5
......@@ -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&apos;exposition "Hoelympique" !</div>
<div>Pour démarrer, cliquez sur le bouton "Démarrer l&apos;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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment