ThreeJS與PhysiJS物理引擎沒有觸發碰撞事件

Question

預期成果：一個框將砸在地上，它會產生一個警告框說：「盒子正好砸在地上」

發生了什麼事：警報框沒有被創建。相關的JavaScript控制檯日誌也不會在碰撞時產生。

---

我在my github repo上共享一個小小的代碼。您可以克隆它並在Chrome瀏覽器中自行運行它。您可以檢查源代碼中**** scripts/app.js ****文件中的physijsBox.addEventListener()部分。

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));