碰撞时的Aframe Sphere-Collider触发功能

Question

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

我如何链接到对象并在它们发生碰撞时调用全局函数？我想我需要通过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>

在这里找到小提琴： 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可以与ar.js（fiddle）配合使用。尽管它有一个hitstart事件而不是hit事件。