两个物体接触时的A帧触发功能答案

【问题标题】：A-frame trigger function when two objects touch两个物体接触时的A帧触发功能
【发布时间】：2021-09-18 13:18:36
【问题描述】：

我想知道如何在 A-frame 中实现某些功能，当两个对象接触时，一个名为 myFunction() 的函数会以一秒的延迟触发。这意味着如果物体持续接触，在触发下一个功能之前会有 1 秒的延迟。如何才能做到这一点？简单例子：

<html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

理想情况下，我希望每 1 秒触发一个名为 myFunction 的函数，球体和正方形正在接触。如何做到这一点？

【问题讨论】：

我建议您尝试与glitch.com/~aframe 共享代码，我会更容易为您提供帮助。
我已经分享了代码，如果我分享一个故障项目，我看不出会有什么不同。如果有帮助，这是我的问题中的代码 sn-p 的小提琴：jsfiddle.net/AidanYoung/m7dfornq

标签： javascript jquery three.js aframe webvr

【解决方案1】：

您可以尝试为要监控的每个对象设置一个类：

<a-box class="collidable" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere class="collidable" position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>

然后附加碰撞事件处理程序，每个处理程序具有 1 秒延迟事件处理程序：

function collisionHandler (event) {
  console.log('Entity collided with', event.detail.collidingEntity);
  setTimeout(() => {
    console.log('one second later...', event.detail.collidingEntity);
  }, 1000)
}

const collidables = document.querySelectorAll('.collidable');
console.log(`collidables ${collidables.length}`);
collidables.forEach(cld => {
    cld.addEventListener('physicscollided', collisionHandler);
})

请参见此处的示例，但您必须弄清楚如何移动对象： https://jsfiddle.net/mq9xwraf/4/

一个问题是，您将在每次碰撞时从任一对象接收事件（正如他们所说，探戈需要两个）。您需要决定如何解决重复的事件。

【讨论】：

我测试了代码并在小提琴中重新定位了要触摸的对象，但我没有在控制台中收到消息。当我打开控制台时，我看到的只是“collidables 2”。即使物体接触，控制台仍然是空的。
您只会在检测到碰撞时收到事件 - 如果它们从一开始就重叠，则可能不会触发边界检查。你能让它们移动（或脚本移动）以在运行时触发碰撞状态变化吗？
处理重复，使用限制。这里有一些关于其中一些的更多信息：telerik.com/blogs/debouncing-and-throttling-in-javascript