How to add collision in gltf file with A-frame?

414 views Asked by At

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/[email protected]/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/[email protected]/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>
0

There are 0 answers