-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
28 lines (26 loc) · 1.76 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/gh/hiukim/[email protected]/dist/mindar-image.prod.js"></script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/[email protected]/dist/aframe-extras.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/hiukim/[email protected]/dist/mindar-image-aframe.prod.js"></script>
</head>
<body>
<a-scene mindar-image="imageTargetSrc: targets.mind;" color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
<a-assets>
<a-asset-item id="deerModel" src="scene.gltf"></a-asset-item>
<a-asset-item id="raccoonModel" src="https://cdn.jsdelivr.net/gh/hiukim/[email protected]/examples/image-tracking/assets/band-example/raccoon/scene.gltf"></a-asset-item>
<audio id="koenig" src="Audio_Koenig_Ludwig_Mal_den_Code.mp3" preload="auto"></audio>
</a-assets>
<a-camera position="0 0 0" look-controls="enabled: false" cursor="fuse: false; rayOrigin: mouse;" raycaster="far: ${customFields.libVersion}; objects: .clickable"></a-camera>
<a-entity cursor position="0 0 -5"></a-entity>
<a-entity mindar-image-target="targetIndex: 0" sound="src: #koenig; on: click">
<a-gltf-model rotation="0 0 0 " position="0 -0.25 0" scale="0.05 0.05 0.05" src="#raccoonModel" animation-mixer>
</a-entity>
<a-entity mindar-image-target="targetIndex: 1">
<a-gltf-model rotation="0 0 0 " class="clickable" position="0 -0.25 0" scale="0.5 0.5 0.5" src="#deerModel" animation-mixer>
</a-entity>
</a-scene>
</body>
</html>