Aframe 1.2.0搭配Ammo.js使用时碰撞检测失效问题如何解决？

问题根源 #

• 球体初始仅挂载ammo-shape未挂载ammo-body组件，点击时动态添加物理体后立即施加冲量，物理组件未完成初始化，状态不同步
• applyImpulse方法第二个参数要求是相对于刚体质心的本地偏移量，原代码传入世界坐标位置，导致力矩计算错误，物理行为异常
• 未开启连续碰撞检测（CCD），高速运动的小尺寸球体撞击薄盒子时容易出现隧穿效应
• 静态盒子的碰撞形状未明确指定适配参数，物理碰撞体与视觉模型尺寸不匹配

修复后完整代码 #

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta id="theme-color" name="theme-color" content="#ffffff">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

<script src="https://mixedreality.mozilla.org/ammo.js/builds/ammo.wasm.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aframe-physics-system@4.0.1/dist/aframe-physics-system.min.js"></script>
</head>

<body>
    <a-scene id="mainScene" vr-mode-ui="enabled: false" physics=" driver: ammo; debug: true; debugDrawMode: 1;"
    device-orientation-permission-ui="enabled: false"
    renderer='antialias: true; colorManagement: true; sortObjects: false; precision: high; logarithmicDepthBuffer: false; physicallyCorrectLights: false;'
    raycaster="objects: .clickable"
    cursor="fuse: false; rayOrigin: mouse">

        <!-- 静态盒子明确指定碰撞形状尺寸 -->
        <a-box id="backboard" position="0 2 -5" width="1" height="1" depth="0.2" 
          ammo-body="type: static; emitCollisionEvents: true;" 
          ammo-shape="type: box; fit: manual; halfExtents: 0.5 0.5 0.1" 
          material="color: tomato;"></a-box>
        <!-- 球体初始挂载ammo-body，开启CCD防隧穿，初始质量为0保持静止 -->
        <a-sphere id="ball" position="0 0 -2" radius="0.15" 
          ammo-body="type: dynamic; mass: 0; ccdMotionThreshold: 0.1; ccdSweptSphereRadius: 0.15;"
          ammo-shape="type: sphere; fit: manual; sphereRadius: 0.15;" 
          material="color: cyan;"></a-sphere>

    </a-scene>

<script>

$("#ball").addClass("clickable");
ball.addEventListener("click", shoot);
backboard.addEventListener("collidestart", function() {
    console.log("HIT");
});

function shoot() {
    // 直接修改质量为1激活动态物理状态，避免动态添加组件的初始化延迟
    ball.setAttribute("ammo-body","mass: 1;");
    // 激活刚体避免休眠
    ball.body.activate();
    const force = new Ammo.btVector3(0, 7, -3);
    // 第二个参数传质心本地偏移，不要传世界坐标
    const localOffset = new Ammo.btVector3(0, 0, 0);
    ball.body.applyImpulse(force, localOffset);
    Ammo.destroy(force);
    Ammo.destroy(localOffset);
}

</script>
</body>
</html>

核心修改说明 #

• 球体初始就挂载ammo-body组件，初始质量设为0保持静止，点击时仅修改质量激活动态状态，消除动态添加组件的初始化延迟问题
• 冲量施加的偏移参数改为质心本地偏移(0,0,0)，力矩计算恢复正常
• 球体添加ccdMotionThreshold和ccdSweptSphereRadius参数开启连续碰撞检测，避免高速运动隧穿
• 静态盒子的ammo-shape明确指定halfExtents参数，保证碰撞体与视觉模型尺寸完全匹配

内容的提问来源于stack exchange，提问作者heroicsatsuma