Aframe “come here” 组件。这样无论用户将第一个实体放在哪里，第二个实体都可以找到第一个实体并对其进行动画处理

Question

我怎样才能创建一个“来到这里”的组件。这样，无论用户将第一个实体放在哪里，第二个实体都可以找到第一个实体并对其进行动画处理。

我有一个随用户移动的按钮，它在被调用时就在那里，它不随相机移动，它在传送前消失，我想添加到这个的想法是用户点击时的功能这个按钮(实体ID:一)它会对另一个实体(实体ID:二)说“过来”实体二正在监听要点击的实体一，然后实体接收实体一的坐标，然后实体二前往实体一个。

关于我正在尝试做的事情的详细描述:之前我写道:“我将如何编写一个“来找我”功能，其中一个实体将另一个实体调用到它的新位置。假设我有一个可拖动的实体，启用了 super 手并且用户将一个立方体拖动到一个新位置。好的，然后用户点击立方体，一个球体飞到立方体的位置，但它的 z(位置坐标 z)，相对于立方体是 -1。然后用户将立方体拖到另一个新位置，用激光点击立方体，之前的同一个球体飞到立方体的新位置，但它仍然是相对于立方体的 z -1。我应该怎么写呢？有哪些可能的方法？什么是在框架中进行的有效方法？我会创造一个无形的立方体上具有 -1 z 位置的子实体？有没有办法查找子实体的全局位置，然后告诉球体实体更新其位置以匹配子实体位置？我将其总结为“来找我”功能，其中一个实体将另一个实体调用到其新位置。

我尝试了什么:有人建议我看两件事 1. aframe extras 中的寻路组件允许 npc 在其动画期间导航网格，但对于此示例，一个简单的动画就可以了。 2.跟随组件(2岁)。 follow 组件对于我目前对 aframe 代码的理解水平来说太抽象了。我不明白它后面是什么，也不知道如何编辑它以使其按照我的意愿运行。

我还尝试了什么:然后我偶然发现了“WebVR 中带有 A 帧的交互式图像网格”https://ottifox.com/prototype/2017/09/25/interactive-image-grid-in-webvr.html这使相机查找图像的位置，然后在单击时移动到该图像。好吧，我想也许我可以用一个盒子代替相机，让盒子移动到另一个盒子而不是图像。好吧，我试过了，到目前为止它什么也没做。

我的代码在 https://comehere.glitch.me https://glitch.com/edit/#!/comehere你能帮我解决如何让一个实体查找另一个实体的位置然后为它设置新位置的动画，这样用户就可以不断更新新实体的位置，并且当点击第二个实体时总是可以移动到用户希望它根据用户放置第一个实体的位置移动到任何地方。

Answer 1

您可以像我一样手动将实体移向目标here (按球体)。
这个想法很简单:

1) 获取局部空间中的目标位置

targetPos = someEl.object3D.worldToLocal(target.object3D.position.clone())

2) 将一个实体移向另一个实体

someEl.object3D.translateOnAxis(targetPos, someDistance)

3) 重复直到物体足够近

var distanceFromTarget = currentPosition.distanceTo(target.object3D.position); 
if (distanceFromTarget > 1) { 
    someEl.object3D.translateOnAxis(targetPos, distance);
}

你可以把它放到一个框架组件中:

AFRAME.registerComponent('foo', {
  init: function() {
     this.target = document.querySelector("#target")
  },
  tick: function(t, dt) {
     var currentPosition = this.el.object3D.position;
     var distanceToTarget = currentPosition.distanceTo(target.object3D.position);
     if (distanceToTarget < 1) return;

     var targetPos = this.el.object3D.worldToLocal(target.object3D.position.clone())
     var distance = dt*this.data.speed / 4000;      
     this.el.object3D.translateOnAxis(targetPos, distance);
  }
}

并像这样使用它:

<a-box foo></a-box>
<a-box id="target"></a-box>

---

通过重新设置 to 属性，您可以像以前一样使用 animation 组件:

 // on some event:
 this.el.setAttribute("animation", "to", newTargetPosition)
 this.el.emit("startAnimation")

但如果目标在移动，事情就会变得复杂，因为您不仅需要获得新位置，还需要获得起始 (from) 位置。