Cannonjs 및 THREE.js 한 단위 해제

Question

안녕하세요 여러분, 제가 간단한 3js 및 대포 js 데모를 만들려고 노력하고 있습니다. 한 단위가 꺼져 있다는 사실을 제외하면 이루어집니다. THREE.BoxGeometry 전체 범위를 취하면서 https://www.dropbox.com/s/qqaal0hgq9a506e/Screenshot%202014-10-01%2022.17.47.png?dl=0

function initCannonWorld() { 

    world = new CANNON.World(); 
    world.gravity.set(0,-9.8,0); 
    world.broadphase = new CANNON.NaiveBroadphase(); 
    world.solver.iterations = 10; 
} 

function addBodyToCannonWorld() { 
    shape = new CANNON.Box(new CANNON.Vec3(1,1,1)); 

    body = new CANNON.Body({ 
     mass: 5 
    }); 

    body.position.set(0,10,0); 

    body.addShape(shape); 
    //body.angularVelocity.set(0,10,0); 
    //body.angularDamping = 0.5; 

    world.addBody(body); 
} 

function initCannon() { 
    initCannonWorld(); 
    addBodyToCannonWorld(); 
    addPlaneBodyToWorld(); 
} 

function initThreeScene() { 
    scene = new THREE.Scene(); 

    camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 100); 
    camera.position.z = 25; 
    camera.lookAt(new THREE.Vector3(0,0,0)); 
    scene.add(camera); 

    // add orbit around where camera is targeting is pointing 
    oribitalControl = new THREE.OrbitControls(camera); 
    // Listen to the change event. 
    oribitalControl.addEventListener("change",render); 

    // Change to canvas for triangles lines. 
    renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 

    document.body.appendChild(renderer.domElement); 
} 
function addPlaneToWorld() { 
    planeGeo = new THREE.BoxGeometry(20,1,20,2,1,2); 
    planeMat = new THREE.MeshBasicMaterial({ color: 0x3498db, wireframe:true}); 
    plane = new THREE.Mesh(planeGeo, planeMat); 
    scene.add(plane); 

} 

function addPlaneBodyToWorld() { 
    var planeShape = new CANNON.Box(new CANNON.Vec3(20,1,20)); 
    // Mass 0 makes a body static. 

    planeBody = new CANNON.Body({mass:0}); 

    planeBody.addShape(planeShape); 
    world.addBody(planeBody); 
} 


function addMeshToWorld() { 
    geometry = new THREE.BoxGeometry(1, 1, 1); 
    material = new THREE.MeshBasicMaterial({ color: 0xff0000, wireframe:true}); 
    mesh = new THREE.Mesh(geometry, material); 
    scene.add(mesh); 
} 

function initThree() { 
    initThreeScene(); 
    addMeshToWorld(); 
    addPlaneToWorld(); 
} 

function run() { 
    requestAnimationFrame(run); 
    oribitalControl.update(); 
    updatePhysics(); 
    render(); 
} 

function updatePhysics() { 
    // Step the physics world 
    world.step(timeStep); 

    mesh.position.copy(body.position); 
    mesh.quaternion.copy(body.quaternion); 

    plane.position.copy(planeBody.position); 
    plane.quaternion.copy(planeBody.quaternion); 


} 

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

Answer 1

CANNON.Box는 인수로 반 범위를합니다. Three.js 상자의 크기를 두 배로 늘리거나 Cannon.js 상자의 크기를 반으로 줄이면 시각적으로 일치합니다.

... 
var planeShape = new CANNON.Box(new CANNON.Vec3(20,1,20)); 
... 
planeGeo = new THREE.BoxGeometry(2*20, 2*1, 2*20, 2, 1, 2); 
...