Three.js and cannon.js are different in width property of object

Hello everybody, hope you are doing well. I need help of pro webgl dev.

I created box in three.js and for collision effect I added box in cannon.js too.
But width property of three.js and cannon.js are different.
Actually, it was double in cannon.js.

I’m attaching the code:
const playerGeo = new THREE.BoxGeometry(1, 1, 1);
//const playerGeo = new THREE.BoxGeometry(2, 2, 2); Setting it up like this works fine.
const boxBody = new CANNON.Body({
mass: 5,
position: new CANNON.Vec3(0, 3, 0),
shape: new CANNON.Box(new CANNON.Vec3(1, 1, 1)),


CANNON.Box takes “half extents” as its arguments, instead of width/height/depth. To get it to match three.js, you’ll need to divide each parameter by two.

Thank you for your kind explanation.
If so, does it work that way on spheres and planes as well?

I think you’ll have to check the API docs for each class you’re using, to learn what it expects. three.js and cannon.js were written independently.