ThreeJS avec moteur physique de PhysiJS ne peut pas déclencher l'événement de collision

Question

Résultat attendu: une boîte baissera sur le terrain et il produira une boîte d'alerte disant « Box vient de frapper le sol »

Qu'est-ce qui se passe : la boîte d'alerte n'est pas en cours de création. Les journaux de la console javascript pertinents ne sont pas non plus produits lors d'une collision.

---

Je partage une petite base de code sur my github repo. Vous pouvez le cloner et l'exécuter vous-même dans votre navigateur Chrome. Vous pouvez inspecter la partie physijsBox.addEventListener() dans le fichier **** scripts/app.js **** du code source.

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; 

})(); 

documentation PhysiJS pertinents:

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

Answer 1

Je recommande l'ajout d'un écouteur de mise à jour:

function initScene(){ 

    // Create scene object here... 

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

    // Rest of start function here... 

    scene.simulate(); 
} 

Tweak votre fonction de rendu en conséquence:

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

Oh, et une petite erreur à window.onLoad:

window.onload = initScene; 

Aussi, assurez-vous de spécifier votre masse pour votre boîte mobile ou bien il sera par défaut à zéro, ce qui le rend inébranlable.

Code Relecture ...

Je vois que vous avez .setGravity comme une propriété. Eh bien, c'est en fait une fonction:

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