ThreeJS与PhysiJS物理引擎不触发碰撞事件

Question

​

​

预期结果:一个盒子会掉在地上，它会产生一个警告框，上面写着"Box刚刚击中地面“

正在发生的事情:未创建警报框。冲突时也不会生成相关的javascript控制台日志。

我共享一个基于我的github回购的小代码。您可以克隆它，并在您的铬浏览器运行它自己。您可以在源代码中的* physijsBox.addEventListener() *文件中检查脚本/app.js部分。

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;

})();

相关的PhysiJS文档：

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

Answer 1

我建议添加一个更新侦听器：

function initScene(){

    // Create scene object here...

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

    // Rest of start function here...

    scene.simulate();
}

相应地调整您的呈现功能：

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

哦，window.onLoad的一个小错误

window.onload = initScene;

另外，确保你为你的移动框指定了你的质量，否则它将默认为零，这使得它不可移动。

重读代码.

我看你把.setGravity作为财产。实际上，这是一个功能：

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