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

【问题标题】：How to bring an object to the controller with A-Frame如何使用 A-Frame 将对象带到控制器
【发布时间】：2018-06-19 02:26:52
【问题描述】：

我是 Aframes 的新手，我正试图弄清楚如何在单击球体时将其带到右手（Vive 控制器）的位置（想想绝地武力拉动类型动画）。

这是我目前所拥有的，我不确定要为“右手位置”填写什么

<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）。我在正确的轨道上吗？如果是这样，我能得到一些关于如何去做的指示吗？

【问题讨论】：

标签： aframe virtual-reality htc-vive

【解决方案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).
}

【讨论】：