ThreeJS collisions with SAT missaligned collision boxes

Question

I'm currently working on a simple game for school, but i have encountered problem making collisions. Collision Boxes seems to be miss aligned.

Here is the game: http://ggeasy.herokuapp.com/game

Those little boxes are drawn like this:

for(var x = 0; x < colliderPolygon.points.length; x++){
    var test = new THREE.Mesh(new THREE.CubeGeometry(8,8,8),material)
    test.position.x = colliderPolygon.pos.x + colliderPolygon.calcPoints[x].x
    test.position.z = colliderPolygon.pos.y + colliderPolygon.calcPoints[x].y
    this.mesh.add(test)
}

I translated the collision, because in theory ThreeJS position is bound to bottom center of box and in SAT it's bound to left top corner of box.

Whole program's code is available here: https://github.com/Hajtosek/ggEasy

Any ideas, what have did wrong?

Answer 1

Ok, so the key is to understand where are position binding points.

THREE.JS has it ind the middle of mesh, but SAT has it in top left corner. var collider = new SAT.Box(new SAT.Vector(cubeMesh.position.x - halfwidth, cubeMesh.position.z - halfHeight), width, height);