2

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/aframe-physics-system@v4.0.1/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>
jacobi1
  • 23
  • 3
  • Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Community Mar 01 '22 at 17:13
  • Edited, I don't know if it's clear enough. I want the sphere to collide with the gltf model, and then both the sphere and the gltf model should disappear. – jacobi1 Mar 01 '22 at 17:44

1 Answers1

4

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 and ammo-body at that point (they need to be added at the same time).

Something like this should work:

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

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

Then use on the entity like this:

<a-entity explode gltf-model="#human" class="enemy" autofit-gltf-ammo-sphere
     position="3 5 0" scale="0.1 0.1 0.1" rotation="0 180 0">      
</a-entity>
Diarmid Mackenzie
  • 646
  • 4
  • 10
  • It works, thanks. And yes, there was an 'Cannot use FIT.ALL without object3DMap.mesh' error in the console. – jacobi1 Mar 02 '22 at 01:33
  • Flagging answer as correct if you can will be appreciated. – Diego Marcos Mar 02 '22 at 02:16
  • @jacobi1 - I noticed you unaccepted the answer. I also noticed (in some unrelated work I was doing) that you can't add an ammo-body without an ammo-shape, so they both have to be added at the same time. I adjusted my answer to reflect that. Does that solve the problem you were having? Or was there some other issue with my answer? – Diarmid Mackenzie Jun 14 '22 at 14:47