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