A-Frameのmouseoverイベントからコンポーネント間で属性データを共有する方法はありますか？

Question

1つのコンポーネントa-boxの位置を別のコンポーネントa-sphereに渡すと、a-sphereのアニメーションが現在のa-boxポジションに更新されます。マークアップからこれを行う宣言的な方法がありますか？

LIVE CODE HERE:

- var gridSystem = [-5,-4,-3,-2,-1, 0, 1, 2, 3, 4, 5]; 
    a-scene 
     each x in gridSystem 
     each y in gridSystem 
      a-box(color='#cccccc' 
       width='2' 
       height='2' 
       depth='2' 
       position='#{(x + x) - 2} #{(y + y) - 2} -11' 
       rotation='0 0 0' 
     ) 
      a-event(name='mouseenter' 
        color='#FF0000' 
        // Here I would like to pass the current a-box position to a-sphere's a-animation thereby updating the position of 'a-sphere' to the last selected 'a-box's position. 
      ) 

      a-event(name='mouseleave' 
        color='#cccccc' 
      ) 

     a-sphere(position = "-12 8 -11" radius="1.25" color="#EF2D5E") 
     a-animation(attribute="position" 
        begin="click" // Replace click with a custom event that is listening for a mouseover event from a new 'a-box'. 
        dur="10000" 
        fill="forwards" 
        to="-10 8 -11" // Update this 'to' value to the last mouseover'ed 'a-box' 
     ) 
     a-light(type='point' 
       color='#AAA' 
       position='0 5 0' 
    ) 

     a-sky(color='#73F7DD') 

     a-camera(position='0 1.8 0') 
     a-cursor(color='#2E3A87') 

Answer 1

あなたはこのロジックを実行するために、カスタムコンポーネントを作成することができます。たとえば、イベントを使用するか、コンポーネントを介してセレクタを渡すことができます。

<a-sphere update-position="entity: #box; on: my-event"> 

https://aframe.io/docs/core/component.html

：あなたはコンポーネントを作成したら、ここでは例のAPIであるかもしれません