You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
3.2 KiB
64 lines
3.2 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Panorama</title>
|
|
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
|
|
<script src="https://unpkg.com/aframe-slice9-component/dist/aframe-slice9-component.min.js"></script>
|
|
<script src="https://unpkg.com/aframe-look-at-component@0.5.1/dist/aframe-look-at-component.min.js"></script>
|
|
<!--animation component script-->
|
|
<script src="https://unpkg.com/aframe-animation-component@^4.1.2/dist/aframe-animation-component.min.js"></script>
|
|
<script src="scriptJS/spots.js"></script>
|
|
</head>
|
|
<body>
|
|
<a-scene id="notreScene" loading-screen="dotsColor:#FED700; backgroundColor: #303030">
|
|
<a-assets timeout="30000">
|
|
<!-- Toutes les scènes les utilisent -->
|
|
<img id="fleche" src="icones/fleche.png" height="357" width="367" alt=""/>
|
|
|
|
<img id="map" src="icones/map.png" height="256" width="256" alt=""/>
|
|
<img id="fondNoir" src="image/fondNoir.jpg" alt=""/>
|
|
</a-assets>
|
|
|
|
<a-sky id="skybox" src="#fondNoir"></a-sky>
|
|
<a-entity id="cam" camera position="0 1.6 0" look-controls wasd-controls="enabled:false">
|
|
<a-entity cursor="fuse:true;fuseTimeout:2000"
|
|
geometry="primitive:ring;radiusInner:0.01;radiusOuter:0.02"
|
|
position="0 0 -1.8"
|
|
material="shader:flat;color:blue">
|
|
|
|
|
|
|
|
</a-entity>
|
|
</a-entity>
|
|
<a-entity id="spots" hotspots>
|
|
<a-entity id="group-tuto">
|
|
<a-entity slice9="width: 6; height: 4; left: 20; right: 43; top: 20; bottom: 43;src: tooltip.png"
|
|
text="value:Pour observer autour de vous, maintenez le clic gauche et deplacez la souris sur navigateur.
|
|
Sur casque VR, tournez la tete.
|
|
|
|
Pour vous deplacer d'une scene a l'autre, mettez le cercle bleu (centre de votre ecran) sur l'icone de la fleche 2 secondes.
|
|
|
|
Pour acceder a la carte, visez egalement son icone avec votre curseur bleu pendant 2 secondes.; width:5; align:center;zOffset:0.05"
|
|
look-at="#cam" position="0 1.7 -5"></a-entity>
|
|
|
|
<a-image link="href:cartes.html; on:click"
|
|
position="-1 -0.5 -3" src="#map" look-at="#cam"
|
|
animation__ScaleMouseEnter="property: scale; to: 1.2 1.2 1.2; startEvents: mouseenter; dur: 300"
|
|
animation__ScaleMouseLeave="property: scale; to: 1 1 1; startEvents: mouseleave; dur: 300"
|
|
></a-image>
|
|
|
|
<a-image link="href:exterieurParking.html; on:click"
|
|
position="1 -0.5 -3" src="#fleche" look-at="#cam" color="#FFFFFF"
|
|
animation__ColorMouseEnter="property: color; to: #FED700; startEvents: mouseenter; dur: 300"
|
|
animation__ColorMouseLeave="property: color; to: #FFFFFF; startEvents: mouseleave; dur: 300"
|
|
animation__ScaleMouseEnter="property: scale; to: 1.2 1.2 1.2; startEvents: mouseenter; dur: 300"
|
|
animation__ScaleMouseLeave="property: scale; to: 1 1 1; startEvents: mouseleave; dur: 300"
|
|
></a-image>
|
|
|
|
|
|
</a-entity>
|
|
</a-entity>
|
|
</a-scene>
|
|
</body>
|
|
</html> |