CannonJS樓。將球棒貼在地上

Question

Noob問題：我試圖把球放在地上，並讓它粘在那裏，甚至在飛機上翻滾。現在它通過飛機。我不確定我犯了什麼錯誤或者我做錯了什麼。

var world, timeStep=1/60, scene, renderer, camera, 
     icosahedronBody, sphereShape, groundShape, 
     ground, groundBody, groundShape; 
    // CONSTANTS 
    var GRID_HELPER_SIZE = 40, 
     GRID_HELPER_STEP = 2, 
     MASS    = 5; 

    initThree(); 
    initCannon(); 
    animate(); 

    function initCannon() { 
    world     = new CANNON.World(); 
    world.broadphase  = new CANNON.NaiveBroadphase(); 
    sphereShape    = new CANNON.Sphere(); 
    groundShape    = new CANNON.Plane(); 

    icosahedronBody   = new CANNON.Body({ 
            mass: MASS, 
            }); 
    groundBody    = new CANNON.Body({ 
            mass: 0, // mass == 0 makes the body static 
            }); 

    world.solver.iterations = 10; 
    world.gravity.set(0,-9.8,0); 
    world.defaultContactMaterial.contactEquationStiffness = 1e9; 
    world.defaultContactMaterial.contactEquationRegularizationTime = 4; 

    icosahedronBody.addShape(sphereShape); 
    icosahedronBody.position.set(0,50,0) 
    icosahedronBody.linearDamping  = 0.5; 
    world.addBody(icosahedronBody); 

    groundBody.addShape(groundShape); 
    groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(0,1,0),-Math.PI/2); 
    world.addBody(groundBody); 

    var ballContact   = new CANNON.ContactMaterial(groundBody, icosahedronBody, 0.0, 0.0); 

    world.addContactMaterial(ballContact); 
    } 

    function initThree(){ 
    // INITIALIZE CANVAS 
    scene     = new THREE.Scene(); 
    renderer    = new THREE.WebGLRenderer(); 
    camera    = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
    var light    = new THREE.AmbientLight(0x404040), 
     directionalLight = new THREE.DirectionalLight(0xffffff), 
     gridHelper  = new THREE.GridHelper(GRID_HELPER_SIZE, GRID_HELPER_STEP); 

    renderer.setSize(window.innerWidth - 100 , window.innerHeight - 100); 
    renderer.setClearColor(0x757575); 
    document.body.appendChild(renderer.domElement); 
    camera.position.set(1,25,100); // camera position to x , y , z 
    camera.lookAt(new THREE.Vector3()) 
    directionalLight.position.set(1, 0.75, 0.5).normalize(); 

    // INITIAL CANVAS 
    scene.add(directionalLight); 
    scene.add(light); 
    scene.add(camera); 
    scene.add(gridHelper); 

    // MATERIALS 
    var icoGeometry = new THREE.IcosahedronGeometry(10, 1), 
     icoMaterial = new THREE.MeshLambertMaterial({color: 0xff0000}); 
    icosahedron  = new THREE.Mesh(icoGeometry, icoMaterial); 

    var groundGeometry = new THREE.BoxGeometry(100 , 1, 100), 
     groundMaterial = new THREE.MeshLambertMaterial({color: 0xcccccc}); 
    ground    = new THREE.Mesh(groundGeometry, groundMaterial); 
    ground.receiveShadow = true; 

    // ADD OBJECTS TO SCENE 
    scene.add(icosahedron); 
    scene.add(ground); 
    }  

    function animate() { 
     requestAnimationFrame(animate); 
     updatePhysics(); 
     render(); 
    } 
    function updatePhysics() { 
     // Step the physics world 
     world.step(timeStep); 
     // Copy coordinates from Cannon.js to Three.js 
     icosahedron.position.copy(icosahedronBody.position); 
     icosahedron.quaternion.copy(icosahedronBody.quaternion); 

     ground.position.copy(groundBody.position); 
     ground.quaternion.copy(groundBody.quaternion); 
    } 
    function render() { 
     renderer.render(scene, camera); 
    } 

Answer 1

看起來您的CANNON.Plane面向錯誤的方向。默認情況下，這是正常的在Z方向指向，所以你需要旋轉它沿正X軸-90度，使在正Y方向上的正常點（使用right hand rule）：

groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1,0,0),-Math.PI/2); 

其次，您必須進行BoxGeometry匹配。確保其沿Z軸更薄。

var groundGeometry = new THREE.BoxGeometry(100, 100, 1), 

我還注意到，THREE.IcosahedronGeometry的半徑爲10，而CANNON.Sphere的半徑爲1（the default）。將其半徑設置爲10以匹配three.js幾何：

sphereShape    = new CANNON.Sphere(10); 

替換這三條線，仿真看起來應該如此。祝你好運！