Question

如何将一个组件a-box的位置传递给另一个组件a-sphere，从而触发a-sphere的动画更新到当前a-box位置。是否有一种声明方法从标记中执行此操作？

- 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

您可以编写自定义组件来执行此逻辑。例如，您可以使用事件或通过组件传递选择器。编写组件后，这可能是一个示例API：

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

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

如何在A-Frame中的鼠标悬停事件中共享组件之间的属性数据？

1 个答案: