I want to change text dynamically through a template component, just as the code below changes the scene through event-set__click
; I tried placing a second event-set__click2
argument but I can't find how to pass it to the <text>
node, the text remains with the original value;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ecosistemas de Veracruz</title>
<meta name="description" content="360° Image Gallery - A-Frame">
<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/aframe-layout-component@5.3.0/dist/aframe-layout-component.min.js"></script>
<script src="https://unpkg.com/aframe-template-component@3.2.1/dist/aframe-template-component.min.js"></script>
<script src="https://unpkg.com/aframe-proxy-event-component@2.1.0/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}"
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}"
event-set__click2="event: click; _target: #txt; value: ${txt}" // if i change it to another name, the layout just won't load
proxy-event="event: click; to: #image-360; as: fade"
sound="on: click; src: #click-sound"></a-entity>
</script>
</head>
<body>
<a-scene>
<a-assets>
<img id="city" crossorigin="anonymous" src="http://datamarindo.baselinux.net/blog/galeria360/manglar_size.jpg?cors=true">
<img id="city-thumb" crossorigin="anonymous" src="http://datamarindo.baselinux.net/blog/galeria360/th_manglar.png?cors=true">
<img id="cubes-thumb" crossorigin="anonymous" src="http://datamarindo.baselinux.net/blog/galeria360/th_bosque_de_oyamel.png?cors=true">
<audio id="click-sound" crossorigin="anonymous" src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Pitangus-3.ogg" preload="auto"></audio>
<img id="cubes" crossorigin="anonymous" src="http://datamarindo.baselinux.net/blog/galeria360/bosquetemplado_size.jpg?cors=true">
</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>
<a-text id="txt" font="kelsonsans" value="Manglar" color="black" width="8" position="1.8 0.5 5"
rotation="0 180 0" height="20" size="80" scale="4 4 4"></a-text>
<a-box src="https://live.staticflickr.com/65535/50690994743_0764ecd550_z_d.jpg" position="0 2 -9"
animation="property: rotation; to: 0 360 0; loop: true; dur: 10000" material="" geometry=""> </a-box>
<!-- Image links. -->
<a-entity id="links" layout="type: line; margin: 1.5" position="-1.5 -.5 -4">
<a-entity template="src: #link" data-src="#cubes" data-thumb="#cubes-thumb" data-value="bosque"></a-entity>
<a-entity template="src: #link" data-src="#city" data-thumb="#city-thumb" data-value="selva"></a-entity>
</a-entity>
<!-- Camera + cursor. -->
<a-entity camera look-controls>
<a-cursor
id="cursor"
animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
event-set__mouseenter="_event: mouseenter; color: springgreen"
event-set__mouseleave="_event: mouseleave; color: black"
raycaster="objects: .link"></a-cursor>
</a-entity>
</a-scene>
</body>
</html>
You just need to rename event to _event. You can check set-event component docs here https://github.com/supermedium/superframe/tree/master/components/event-set/
event-set__click2="_event: click; _target: #txt; value: ${txt}"