碰撞无法使用 Aframe 1.2.0 和 Ammo.js

Question

我开始使用 Aframe 1.2.0 和 Ammo.js 制作游戏，因为 CANNON.js 支持将来可能会被弃用。

我有一个非常简单的起点 - 一个静态盒子 - 一个动态球体 - 单击球体开火 - 它应该从盒子上弹开，但它直接穿过它。我试过将拍摄功能放入一个组件中，但同样的事情发生了。

此处出现故障 -> https://descriptive-truthful-sneezeweed.glitch.me

<!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" material="color: tomato;"></a-box>
        <a-sphere id="ball" position="0 0 -2" radius="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() {
    ball.setAttribute("ammo-body","type: dynamic;");
    const force = new Ammo.btVector3(0, 7, -3);
    const pos = new Ammo.btVector3(ball.object3D.position.x, ball.object3D.position.y, ball.object3D.position.z);
    ball.body.applyImpulse(force, pos);
    Ammo.destroy(force);
    Ammo.destroy(pos);
}

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

Answer 1

似乎错误是由于球体只有 ammo-shape 组件而没有主体。如果两者都在点击时附加，则它按预期工作：

<script src="https://aframe.io/releases/1.2.0/aframe.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>
<script>
  AFRAME.registerComponent("foo", {
    init: function() {
      // when clicked attach the body and the shape, and apply the impulse
      this.el.addEventListener("click", evt => {
        this.el.setAttribute("ammo-body", {
          type: "dynamic"
        });
        this.el.setAttribute("ammo-shape", {
          type: "sphere",
          fit: "manual",
          sphereRadius: 0.15
        });
        const force = new Ammo.btVector3(0, 7, -3);
        const pos = new Ammo.btVector3(this.el.object3D.position.x, ball.object3D.position.y, ball.object3D.position.z);
        ball.body.applyImpulse(force, pos);
        Ammo.destroy(force);
        Ammo.destroy(pos);
      })
      // check if the events are working by changing a the boxes color
      document.querySelector("#backboard").addEventListener("collidestart", evt => {
        document.querySelector("#backboard").setAttribute("color", "green");
      })
    }
  })
// the rest is like in the scene from the question
</script>
<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="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"  
            material="color: tomato;"></a-box>
  <a-sphere id="ball" class="clickable" position="0 0 -2" radius="0.15" 
            material="color: cyan;" foo></a-sphere>
</a-scene>

碰撞无法使用 Aframe 1.2.0 和 Ammo.js

Collisions not working using Aframe 1.2.0 & Ammo.js

game-physics

ammo.js

aframe