当两个盒子相互交叉时如何触发A-FRAME碰撞事件?

时间:2017-03-19 09:01:28

标签: aframe

我试图在A-FRAME v.0.5.0中检测两个盒子的碰撞。我使用raycaster示例: https://aframe.io/docs/0.5.0/components/raycaster.html#whitelisting-entities-to-test-for-intersection

但对我来说它只适用于光标与其中一个网格相交。 在编写时,raycaster会检测从起点到某个方向创建的线与所需网格相交的时间(此处标记为可碰撞类)。看起来这个碰撞检测线的开始以某种方式设置在相机上或光标上但不在其中一个盒子上。如何重新分配这个起点?

在初始化场景之前,我添加了组件:

AFRAME.registerComponent('collider-check', {
dependencies: ['raycaster'],
init: function () {
    console.log("we have component");
this.el.addEventListener('raycaster-intersected', function () {
    console.log('Player hit something!');
});
},
});

然后是A-FRAME实体

    <a-entity id="player" collider-check >
      <a-entity id="rc" 
        raycaster="objects: .collidable" 
        geometry="primitive: box; width: 0.5; height: 4; depth: 0.5" 
        material="shader: flat; color:gray" 
        position="0 -0.9 0" 
        rotation="90 0 0" ></a-entity>
    </a-entity>

    <a-entity id="inmotion" class="collidable" 
        geometry="primitive: box; width: 0.5; height: 4; depth: 0.5" 
        position="1 0 0"
        material="shader: flat; color: #00CCDD">
        <a-animation id="canim"
          attribute="position" 
            dur="2000"
            from ="-2 -1 0"
            to="2 0 0.5"
            fill="forwards"
            direction="alternate"
            repeat="indefinite">

        </a-animation>
    </a-entity>

这是jsfiddle的例子; https://jsfiddle.net/Suiseki/9ggs6x4m/2/

1 个答案:

答案 0 :(得分:3)

使用raycaster是检查3D空间中碰撞的一种方法,但如果其中一个形状是光线/线条,则效果最佳。如果你有两个3D对象,那么在没有raycaster的情况下使用边界框或边界球碰撞会更容易。以下是每个的示例实现:

两者都会在碰撞时在元素上提交hit个事件。 Example usage,略有不同的情况。