代码之家 › 专栏 › 技术社区 › 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 而不是 打 事件。

推荐文章

ajai.s · 根据用户偏好改变网络a帧中的化身

2 年前

framina · 如何通过“animationend”javascript函数启动a帧动画?

7 年前

Anthony Scavarelli · 资产架构属性如何与img资产一起工作?

7 年前

sçuçu · A-Frame如何定义自己的HTML元素?

7 年前

deecobbk · 如何将js onclick事件添加到帧动画

7 年前

sidd · 一些android设备上的框架陀螺仪问题

7 年前

Syed Saad · OBJ模型加载到不需要的纹理/颜色中

7 年前

Felix · 如何从帧中的三维对象获取边界框信息?

7 年前

sidd · 即使正在加载纹理文件,也未加载帧obj模型

7 年前

Danthony · A框架模型面未显示

7 年前