I am starting aframe and I cant display some informations (a small text) on pictures.
This is actually my code, if you could help me it would be very nice.
<html>
<head>
<meta charset="utf-8">
<title>360° Image Gallery</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@5/dist/aframe-event-set-component.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-layout-component.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-template-component.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-proxy-event-component.min.js"></script>
<!-- Image link template to be reused. -->
<script id="link" type="text/html">
<a-entity class="link"
geometry="primitive: plane; height: 1; width: 1"
material="shader: flat; src: ${thumb}"
sound="on: click; src: #click-sound"
event-set__mouseenter="scale: 1.2 1.2 1"
event-set__mouseleave="scale: 1 1 1"
event-set__click="_target: #image-360; _delay: 300; material.src: ${src}"
proxy-event="event: click; to: #image-360; as: fade"></a-entity>
</script>
<script id="panInfor" type="text/html">
<a-entity class="panInfor"
geometry="primitive: plane; height: 1; width: 1"
material="shader: flat; src: ${thumb}"
sound="on: click; src: #click-sound"
event-set__mouseenter="scale: 1.2 1.2 1"
event-set__mouseleave="scale: 1 1 1"
event-set__click="_target: #text-informations;_delay: 300; material.src: ${src}"
proxy-event="event: click; to: #text-informations; as: switch">
</a-entity>
</script>
</head>
<body>
<a-scene>
<a-assets>
<img id="city" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg" crossorigin="anonymous">
<img id="city-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-city.jpg"
crossorigin="anonymous">
<img id="cubes" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/cubes.jpg" crossorigin="anonymous">
<img id="cubes-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-cubes.jpg"
crossorigin="anonymous">
<img id="sechelt" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg"
crossorigin="anonymous">
<img id="sechelt-thumb" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/thumb-sechelt.jpg"
crossorigin="anonymous">
<img id="messi" src="messi.jpg" crossorigin="anonymous">
<img id="ronaldo" src="ronaldo.jpg" crossorigin="anonymous">
<img id="mbappe" src="mbappe.jpg" crossorigin="anonymous">
<img id="monnet" src="monnet.jpg" crossorigin="anonymous">
<img id="mona" src="mona.jpg" crossorigin="anonymous">
<img id="oreille" src="oreille.jpg" crossorigin="anonymous">
<audio id="click-sound" src="https://cdn.aframe.io/360-image-gallery-boilerplate/audio/click.ogg"
crossorigin="anonymous"></audio>
<a-text position="1 2 -4" rotation="0 -90 0" id="text-messi" value="Greatest Of All Times" align="center">
</a-text>
<a-text position="1 2 -2.5" rotation="0 -90 0" id="text-ronaldo" value="Overrated" align="center">
</a-text>
<a-text position="1 2 -1" rotation="0 -90 0" id="text-mbappe" value="Runs fast" align="center">
</a-text>
<a-text position="-4 2 -1" rotation="0 90 0" id="text-mona" value="Beautiful lady" align="center">
</a-text>
<a-text position="-4 2 -4" rotation="0 90 0" id="text-monnet" value="Nice bridge" align="center">
</a-text>
<a-text position="-4 2 -2.5" rotation="0 90 0" id="text-oreille" value="Lost his ears" align="center"></a-text>
</a-assets>
<!-- 360-degree image. -->
<a-sky id="image-360" radius="10" src="#city"
animation__fade="property: components.material.material.color; type: color; from: #FFF; to: #000; dur: 300; startEvents: fade"
animation__fadeback="property: components.material.material.color; type: color; from: #000; to: #FFF; dur: 300; startEvents: animationcomplete__fade">
</a-sky>
<!-- Image links. -->
<a-entity id="links" layout="type: line; margin: 1.5" position="-3 1 -5">
<a-entity template="src: #link" data-src="#cubes" data-thumb="#cubes-thumb"></a-entity>
<a-entity template="src: #link" data-src="#city" data-thumb="#city-thumb"></a-entity>
<a-entity template="src: #link" data-src="#sechelt" data-thumb="#sechelt-thumb"> </a-entity>
</a-entity>
<!--Panel footballers-->
<a-entity id="pansInformsFootballer" layout="type: line; margin: 1.5" position="1 1 -4" rotation="0 -90 0 ">
<a-entity template="src: #panInfor" data-src="#text-messi" data-thumb="#messi"></a-entity>
<a-entity template="src: #panInfor" data-src="#text-ronaldo" data-thumb="#ronaldo"></a-entity>
<a-entity template="src: #panInfor" data-src="#text-mbappe" data-thumb="#mbappe"></a-entity>
</a-entity>
<!--Panel works of art-->
<a-entity id="pansInformsPaint" layout="type: line; margin: 1.5" position="-4 1 -1" rotation="0 90 0 ">
<a-entity template="src: #panInfor" data-src="#text-mona" data-thumb="#mona"></a-entity>
<a-entity template="src: #panInfor" data-src="#text-oreille" data-thumb="#oreille"></a-entity>
<a-entity template="src: #panInfor" data-src="#text-monnet" data-thumb="#monnet"></a-entity>
</a-entity>
<a-text id="text-informations" src="#text-messi" visible="false"
animation__click="property: visible; dur: 0; to: true; startEvents: switch" color="yellow">
</a-text>
<!-- Camera + cursor. -->
<a-camera look-controls wasd-controls="acceleration:300 ">
<a-cursor id="cursor" color="yellow"
animation__clickreset="property: scale; to: 0.1 0.1 0.1; dur: 1; startEvents: animationcomplete__click"
animation__fusing="property: scale; from: 1 1 1; to: 0.1 0.1 0.1; easing: easeInCubic; dur: 150; startEvents: fusing">
</a-cursor>
</a-camera>
</a-scene>
</body>
</html>
The aim of my code is just to display informations when I click on the pictures/paints.
The part where the changes is the code from the tutorial of aframe “360 image gallery”.
I wanted to display informations on pictures, retrieving the code of the tutorial but it doesnt work…
Thank you