aframe-physics-extras: collision of dynamic entity with static gltf model

Question

I\'m trying to catch collision event between a dynamic sphere and a static gltf model. I\'m building the gltf entity the following way:

    const template = docum         


        

Answer 1

Meanwhile I was able to implement animated collision mesh for a gltf model. I used a helper function implemented by @Piotr Adam Milewski here. See more details about the function in this answer. Any other suggestions to improve performance are appreciated.

AFRAME.registerComponent('animated-collision-shape', {
    init: function () {
        this.nodeMap = {};

        this.el.setAttribute('body', 'type: static; shape: none;')

        this.el.addEventListener('model-loaded', () => {
            const size = new THREE.Vector3();
            let box = new THREE.Box3().setFromObject(this.el.object3D);
            box.getSize(size);
            this.offset = new CANNON.Vec3(0, size.y / 2, 0);

            let mesh = this.el.getObject3D("mesh");
            mesh.traverse(node => {
                if (node.isSkinnedMesh) {
                    this.skinnedMesh = node;
                    this.nodeMap[node.uuid] = {
                        mesh: node,
                        box: new THREE.Box3()
                    }
                }
            });

            if (!Object.keys(this.nodeMap).length) {
                this.nodeMap[0] = {
                    mesh: this.el.object3D,
                    box: new THREE.Box3()
                };
            }

            this.el.components["body"].shouldUpdateBody = true;
        })
    },

    remove: function () {
        this.removeBoxes();
    },

    tick: (function () {
        const size = new THREE.Vector3();
        let common_box_uuid = null;

        return function tick() {
            if (
                !Object.keys(this.nodeMap).length ||
                !this.el.body) {
                return;
            }

            let combine = this.data.combine === true

            let i = 0;
            for (let uuid in this.nodeMap) {
                // Non - skinned case
                if (!this.nodeMap[uuid].mesh.isSkinnedMesh) {
                    this.nodeMap[uuid].box.setFromObject(this.el.object3D);
                    return;
                }
                // skinned model. Either separate boxes, or combined
                if (common_box_uuid && combine) {
                    utils.SkinnedMeshBBox.expandAABB(this.nodeMap[uuid].mesh, this.nodeMap[common_box_uuid].box);
                } else {
                    utils.SkinnedMeshBBox.getAABB(this.nodeMap[uuid].mesh, this.nodeMap[uuid].box);
                    common_box_uuid = uuid
                }

                if (isFinite(this.nodeMap[common_box_uuid].box.max.x)) {
                    this.nodeMap[common_box_uuid].box.getSize(size);
                    if (this.el.body.shapes[i]) {
                        this.el.body.shapes[i].halfExtents = new CANNON.Vec3(size.x / 2, size.y / 2, size.z / 2);
                        this.el.body.shapes[i].updateConvexPolyhedronRepresentation();
                    } else {
                        let shape = new CANNON.Box(new CANNON.Vec3(size.x / 2, size.y / 2, size.z / 2))
                        this.el.body.addShape(shape, this.offset, shape.orientation);
                    }
                    i++;
                }
            }

            this.el.components["body"].shouldUpdateWireframe = true;
        };
    })()
})