My cube does not collide with gltf model. I already tried everything (including Ammo.js collision detection of GLTF model in A-frame), but my code does not work.
The full code in https://a-frame-collision-with-gltf.glitch.me
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/aframe-extras@6.1.1/dist/aframe-extras.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.js"></script>
<script>
AFRAME.registerComponent('explode', {
init: function() {
var el = this.el;
el.addEventListener("collidestart", function () {
console.log('collision detected');
el.parentElement.removeChild(el);
});
}
});
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");
});
}
});
</script>
<a-scene physics="driver: ammo; debug: true; gravity: -9.8; debugDrawMode: 1">
<a-assets>
<a-asset-item id="lowpolylandscape" src="https://cdn.glitch.global/56205a53-63c6-43af-b8e7-7e755e8503c5/lowpolylandscape.gltf"></a-asset-item>
<!-- There is a scene.bin in the same directory -->
</a-assets>
<a-camera position="0 1.6 20"></a-camera>
<a-box
color="red"
scale="1 1 1"
position="0 5 -6"
ammo-body="type: dynamic"
ammo-shape="type: box"
></a-box>
<a-entity
gltf-model="#lowpolylandscape"
position="0 0.7 0"
rotation="0 270 0"
explode
autofit-gltf-ammo-sphere
></a-entity>
</a-scene>