代码之家 › 专栏 › 技术社区 › vinni

A同一球体碰撞器碰撞触发功能

aframe html

vinni · 技术社区 · 6 年前

我在不同的ar标记上有两个aframe实体,希望在它们发生碰撞时触发某个函数。我补充说 Aframe-Extras 利用球体对撞机模块。不幸的是,我找不到它的任何文档。

如何链接到对象,并在对象发生冲突时调用全局函数?我想我需要通过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/

1 回复 | 直到 6 年前

Piotr Adam Milewski 6 年前

这个 sphere-collider 应该发出一个 hit 具有交叉点详细信息的事件。

与对撞机有实体的:

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

你可以在球体上聆听 打 和 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 而不是 打 事件。