Wie teilen Sie Attributdaten zwischen Komponenten eines mouseover-Ereignisses in A-Frame?

Question

Wie würde ich die Position einer Komponente a-box an eine andere Komponente übergeben a-sphere wodurch Triggerung a-sphere Animation auf aktuelle a-box Position zu aktualisieren. Gibt es eine deklarative Methode, um dies aus dem Markup zu machen?

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

Sie benutzerdefinierte Komponenten schreiben, diese Logik zu tun. Sie können beispielsweise Ereignisse verwenden oder einen Selektor durch die Komponente leiten. Hier könnte ein Beispiel API sein, wenn Sie die Komponente schreiben:

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

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