Cannonjs and THREE.js one unit off - three.js

Question

Hey guys I am trying to make a simple 3js and cannon js demo, it is done except for the fact that it appears that there is a one unit off.
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 takes half extents as argument, while THREE.BoxGeometry takes full extents. Double the dimensions of your Three.js boxes or halve the dimensions of the Cannon.js boxes, and they will visually match.
...
var planeShape = new CANNON.Box(new CANNON.Vec3(20,1,20));
...
planeGeo = new THREE.BoxGeometry(2*20, 2*1, 2*20, 2, 1, 2);
...