Aframe Sphere-Collider 碰撞触发函数

Question

我在 Aframe 中有两个实体位于不同的 AR 标记上，我想在它们发生碰撞时触发某个功能。我添加了 Aframe-Extras 以使用 Sphere-Collider 模块。不幸的是我找不到它的任何文档。

我如何 link 对象并在它们发生碰撞时调用全局函数？我想我需要通过 js 以某种方式绑定它？

我现在的 html 是这样的：

<a-scene embedded arjs='trackingMethod: best; sourceType: webcam; debugUIEnabled: false; patternRatio: 0.7;'>
    <a-marker preset='custom' type='pattern' url='patterns/1.patt'>
        <a-box sphere-collider color="navy" depth="1" height="1" width="1" position="1 0 0"></a-box>
    </a-marker>

    <a-marker preset='custom' type='pattern' url='patterns/2.patt'>
        <a-sphere sphere-collider color="blue" position="1 0 0" radius="0.5"></a-sphere>
    </a-marker>


    <!-- add a simple camera -->
    <a-entity camera></a-entity>
</a-scene>

非常感谢！

更新 1

它也可以用于 Ar.js 标记吗？

<a-marker preset='custom' type='pattern' url='patterns/1.patt'>
    <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" foo></a-box>
    <a-sphere sphere-collider='' position="3 0.5 -3" radius="0.25" color="#EF2D5E">
        <a-animation attribute="position" dur="5000" fill="forwards" to="-1 0.5 -3" repeat="indefinite"></a-animation>
    </a-sphere>
</a-marker>

在这里找到 fiddle： https://jsfiddle.net/jk4gbu13/5/

Answer 1

sphere-collider 应该发出一个 hit 事件，其中包含路口的详细信息。

拥有一个带有对撞机的实体：

<a-box sphere-collider></a-box>
<a-sphere></sphere>

您可以在球体上侦听 hit 和 hitend 事件，以检测碰撞何时发生以及何时结束

this.el.addEventListener('hit', (e) => {
   console.log(e)
})
this.el.addEventListener('hitend', (e) => {
    console.log('hitend')
    console.log(e)
})

看看here。

Ngo Kevin 的 aabb-collider seems to work fine with ar.js (fiddle)。虽然它有一个 hitstart 而不是 hit 事件。

Aframe Sphere-Collider 碰撞触发函数

Aframe Sphere-Collider trigger function on collision

html

aframe

更新 1