Cómo detectar la colisión de la esfera con el modelo gltf y hacer que el modelo gltf desaparezca de la escena después de la colisión. La detección de colisiones en mi código funciona con colisiones entre esferas pero no con modelos gltf.
<!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>Supongo que lo que sucede aquí es que cuando se inicializa ammo-shape en el modelo GLTF, el modelo GLTF no se carga.
Si revisa su consola, es posible que vea este error:
Cannot use FIT.ALL without object3DMap.meshLa forma de munición no puede ajustarse automáticamente a la malla (aún no existente) y, por lo tanto, terminará sin ninguna forma, por lo tanto, sin colisión.
Una solución simple sería especificar explícitamente el radio de la forma de munición:
ammo-shape="type: sphere; fit: manual; sphereRadius:0.5" Otra solución, si realmente quiere evitar especificar un radio, sería escribir un componente pequeño que espera el evento model-loaded en la entidad, y solo agregar la ammo-shape ammo-body en ese punto (necesitan agregarse al mismo tiempo).
Algo como esto debería funcionar:
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"); }); } });Luego use en la entidad de esta manera:
<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>