ThreeJS with PhysiJS physics engine not triggering collision event

Question

Expected outcome: a box will drop on the ground and it will produce an alert box saying "Box just hit the ground"

What's happening: alert box is not being created. Relevant javascript console logs are also not being produced upon collision.

---

I am sharing a small code base on my github repo. You can clone it and run it yourself in your chrome browser. You can inspect the physijsBox.addEventListener() portion in the ****scripts/app.js**** file in the source code.

var sceneObj = (function(){

    "use strict";

    Physijs.scripts.worker = "scripts/physijs_worker.js";
    Physijs.scripts.ammo = "ammo.js";

    var scene, camera, renderer
    var physijsBox, physijsGround

    function initScene(){
        scene = new Physijs.Scene();
        scene.setGravity = new THREE.Vector3(0, -50, 0);

        camera = new THREE.PerspectiveCamera(35, window.innerWidth/window.innerHeight , 1, 1000);
        camera.position.z = 100;

        renderer = window.WebGLRenderingContext ? new THREE.WebGLRenderer() : new THREE.CanvasRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.getElementById("webgl-container").appendChild(renderer.domElement);

        addPhysijsBox();
        addPhysijsGround();
        render();
    }

    function addPhysijsBox(){
        var myBoxMaterial = Physijs.createMaterial(
            new THREE.MeshBasicMaterial({
                color: 0xff00ff
            }),
            0,  // friction
            0.8 // restitution / bounciness
        );
        physijsBox = new Physijs.BoxMesh(new THREE.CubeGeometry(15,15,15), myBoxMaterial);
        physijsBox.position.set(0,30,10);
        physijsBox.rotation.set(0,50,90);
        scene.add(physijsBox);

        physijsBox.addEventListener('collision', function(
            theOtherObject, linearVelocity, angularVelocity, arg4
        ){
            console.log("box collided with something");
            if (theOtherObject.name == "ground"){
                alert("Box just hit the ground");
            }
        })
    }

    function addPhysijsGround(){
        var myGroundMaterial = Physijs.createMaterial(
            new THREE.MeshBasicMaterial({
                color: 0x008888
            }),
            0, // friction
            0.4 // restitution / bounciness
        );
        physijsGround = new Physijs.BoxMesh(new THREE.CubeGeometry(150, 3, 150), myGroundMaterial, 0);
        physijsGround.name = "ground";
        physijsGround.position.y = -15;
        scene.add(physijsGround);
    }

    function render(){
        scene.simulate();
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }

    window.onLoad = initScene();
    return scene;

})();

Relevant PhysiJS documentation:

• https://github.com/chandlerprall/Physijs/wiki/Collisions
• https://github.com/chandlerprall/Physijs/issues/177

Answer 1

I recommend adding an update listener:

function initScene(){

    // Create scene object here...

    scene.addEventListener("update", function(){
        scene.simulate(undefined, 2);
    });

    // Rest of start function here...

    scene.simulate();
}

Tweak your rendering function accordingly:

function render(){
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}

Oh, and one tiny mistake at window.onLoad:

window.onload = initScene;

Also, make sure you specify your mass for your moving box or else it will default to zero, which makes it immovable.

Re-reading code...

I see you have .setGravity as a property. Well, it's actually a function:

scene.setGravity(new THREE.Vector3(0, -50, 0));