'Ammo.js collision detection of GLTF model in A-frame

How to detect collision of sphere with gltf model and make the gltf model disappear from scene after the collision. The collision detection in my code works with collisions between spheres but not with gltf models.

<!DOCTYPE html>
<html>
<head>
<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="http://cdn.jsdelivr.net/gh/n5ro/[email protected]/dist/aframe-physics-system.min.js"></script>
<script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v6.1.1/dist/aframe-extras.min.js" ></script>
<script>
   AFRAME.registerComponent('explode', {
       init: function() {
           var el = this.el;
           el.addEventListener("collidestart", function () {
               console.log('collision detected');
               el.parentElement.removeChild(el);
    });
  }
});
</script>
</head>
<body>
 <a-scene physics=" driver: ammo">
   <a-assets>
    <a-asset-item id="human" response-type="arraybuffer" src="human.glb"></a-asset-item>
   </a-assets> 
   <a-camera position="2 5 2" look-controls wasd-controls>
        <a-cursor></a-cursor>
        </a-camera>
  <a-entity explode gltf-model="#human" class="enemy" ammo-body="type:   kinematic; 
     emitCollisionEvents: true;" ammo-shape="type: sphere"
     position="3 5 0" scale="0.1 0.1 0.1" rotation="0 180 0">      
    </a-entity>
  <a-sphere explode ammo-body="type: kinematic; emitCollisionEvents: true;"
    ammo-shape="type: sphere" position="1 5 0" velocity="1 0 0" radius="0.5"
    color="blue"></a-sphere>
  <a-sphere explode ammo-body="type: kinematic; emitCollisionEvents: true;"
    ammo-shape="type: sphere" position="5 5 0" velocity="0 0 0" radius="0.5"
    color="blue"></a-sphere>
 
 </a-scene>
</body>
</html>

Solution 1:^[1]

I expect that what is happening here is that when ammo-shape is initialized on the GLTF model, the GLTF model is not loaded.

If you check your console, you might well be seeing this error:

Cannot use FIT.ALL without object3DMap.mesh

The ammo-shape cannot auto-fit to the (not-yet existent) mesh and so you'll end up without any shape - hence no collision.

A simple fix would be to explicitly specify the radius for the ammo-shape:

ammo-shape="type: sphere; fit: manual; sphereRadius:0.5"

Another solution, if you really want to avoid specifying a radius, would be to write a small component that waits for the model-loaded event on the entity, and only add the ammo-shape at that point.

Something like this would probably work:

AFRAME.registerComponent("autofit-gltf-ammo-sphere", {

  init() {
    this.el.addEventListener("model-loaded", () => {
        this.el.setAttribute("ammo-shape", "type:sphere");
    });
  }
});

Then use on the entity like this:

<a-entity explode gltf-model="#human" class="enemy" ammo-body="type:   kinematic; 
     emitCollisionEvents: true;" autofit-gltf-ammo-sphere
     position="3 5 0" scale="0.1 0.1 0.1" rotation="0 180 0">      
</a-entity>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Diarmid Mackenzie

'Ammo.js collision detection of GLTF model in A-frame

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]