aframe - 当两个盒子相交时如何触发 A-FRAME 碰撞事件？

Question

我正在尝试检测 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/

Answer 1

使用射线转换器是检查 3D 空间中碰撞的一种方法，但最好是其中一种形状是射线/线。如果您有两个 3D 对象，则在没有光线转换器的情况下使用边界框或边界球体碰撞会更容易。以下是每个的示例实现:

• aabb-collider
• sphere-collider

当它们发生碰撞时，两者都会在元素上记录 hit 事件。 Example usage ，对于稍微不同的情况。