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, так что вам нужно повернуть его -90 градусов вдоль положительной оси X, чтобы сделать нормальную точку в положительном направлении 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); 

Замените эти три строки и ваша симуляция выглядит как следует. Удачи!