Collisions not working using Aframe 1.2.0 & Ammo.js

Question

I started making a game using Aframe 1.2.0 and Ammo.js because CANNON.js support may be deprecated in the future.

I have a very simple starting point - a static box - a dynamic sphere - click the sphere to fire - it should be bouncing off the box, but it just goes right through it. I've tried putting the shoot function into a component, but the same thing happens.

Glitch here -> 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

It seems the error is caused by the sphere having only the ammo-shape component, without the body. If both are attached on click, then it's working as expected:

 <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>

Collisions not working using Aframe 1.2.0 & Ammo.js

Question

1 answers

solution1
1 ACCPTED 2021-09-24 14:07:12

Collisions not working using Aframe 1.2.0 & Ammo.js

Question

1 answers

solution1 1 ACCPTED 2021-09-24 14:07:12

solution1
1 ACCPTED 2021-09-24 14:07:12