Question

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

这是我到目前为止所做的事情，我不知道该为什么填写＃34;右手位置＆＃34;

<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');
    });
  }
});

显然这段代码不起作用，因为＆＃34;右手位置＆＃34;不是一件事。任何人都可以给我一些关于如何使这项工作的指示？我的猜测是，在点击之后，我需要添加一个克隆球体作为右手的孩子，然后将其拉到略微修改（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).
}

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

1 个答案: