在A-frame js中通过模板更改文本值

问题描述 投票:0回答:1

我想通过模板组件动态改变文本,就像下面的代码通过

event-set__click
改变场景一样;我尝试放置第二个
event-set__click2
参数,但我找不到如何将其传递到
<text>
节点,文本仍保留原始值;

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Ecosistemas de Veracruz</title>
    <meta name="description" content="360&deg; 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/[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}"
        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>
javascript aframe
1个回答
0
投票

您只需将事件重命名为_event。您可以在此处查看 set-event 组件文档 https://github.com/supermedium/superframe/tree/master/components/event-set/

event-set__click2="_event: click; _target: #txt; value: ${txt}"

© www.soinside.com 2019 - 2024. All rights reserved.