如何使用A-Frame将对象带到控制器

Question

我是Aframes的新手，我正试图弄清楚当点击它时如何将球体带到右手的位置（Vive控制器）（Think Jedi force pull type animation）。

这是我到目前为止我不知道该填写什么“右手位置”

<a-scene >
  <a-entity id="leftHand" hand-controls="left"></a-entity>
  <a-entity id="rightHand" hand-controls="right"></a-entity>
  <a-entity laser-controls="hand: right"></a-entity>

  <a-sphere class="sphere" id="mySphere" position="1 1 1" radius=".2" color="#2AFF00"
            bring-sphere-to-hand="">
            <a-animation attribute="position" from="1 1 1" to=<position-of-right-hand> dur=2000 begin=spherePull></a-animation>
</a-scene>

然后在我的JavaScript中我有......

AFRAME.registerComponent('bring-sphere-to-hand', {
  schema: {},

  init: function () {
    var el = this.el;

    el.addEventListener('click', function () {
      el.emit('spherePull');
    });
  }
});

显然这段代码不起作用，因为“右手位置”不是一件事。任何人都可以给我一些关于如何使这项工作的指示？我的猜测是，点击后，我需要添加一个克隆球体作为右手的孩子，然后将其拉到略微修改（0,0,0）。我是否在正确的轨道上，如果是这样，我可以得到一些关于如何解决这个问题的指示吗？

Answer 1

对于简单的直线动画，您可以使用https://github.com/ngokevin/kframe/tree/master/components/animation和

el.setAttribute('animation', {
  property: 'position',
  from: fromEl.object3D.position,  // Forgot if you need to serialize this to string.
  to: toEl.object3D.position,
  dur: 500
});

在那之后，我想你即使在动画期间手移动，你也希望抓住对象或继续跟随手。你需要一个带tick方法的组件...伪代码：

tick: function (t, dt) {
  // Calculate vector between this.el (the object) and the hand.

  // Close the distance between the positions based on the duration you set and the timeDelta, using a velocity.

  // When the distance is small enough, you can either leave as it to have the object keep tracking the hand, or re-parent `this.el`'s object3D to the hand (handEl.object3D.add(this.el.object3D).
}