ThreeJSは、衝突イベントをトリガ

Question

期待される成果ではない：ボックスは地面にドロップしますと、それは何が起こっている

を「ボックスがちょうど地面を打つ」という警告ボックスが生成されます：アラートボックスが作成されていません。関連するjavascriptコンソールログも衝突時に生成されません。

---

私はmy github repoの小さなコードベースを共有しています。クローンしてクロームブラウザで自分で実行することができます。ソースコード内の**** 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 1つの小さな間違い：

window.onload = initScene; 

をまた、それがゼロにデフォルト設定されます、あなたの移動箱のためか、他あなたの塊を指定してください、それは不動にする。

再読み込みコード...

私はあなたがプロパティとして.setGravityを持っている参照してください。実際には関数なのです：

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