I have 4 3D points which represent a even quad in space. (So 3 points are sufficient) I need to get all the individual transformations (translation, rotation, dimensions) so that I can build that quad in my CSS 3D engine. So the default normal vector for a quad is [0, 0, 1].
What I have so far:
// 4 points p0, p1, p2, p3 // normal normal = cross(p1 - p0, p2 - p0) // axis and angle axis = cross([0, 0, 1], normal) angle = arccos(dot([0, 0, 1], normal)) // rotation matrix rotationMatrix = matrix4.fromAxisAngle(axis, angle) // width and height width = sqrt((p2.x - p1.x)^2, (p2.y - p1.y)^2, (p2.z - p1.z)^2) height = sqrt((p1.x - p0.x)^2, (p1.y - p0.y)^2, (p1.z - p0.z)^2) // translation x = (p0.x + p1.x + p2.x + p3.x) / 4 y = (p0.y + p1.y + p2.y + p3.y) / 4 z = (p0.z + p1.z + p2.z + p3.z) / 4
It almost works, but some rotations are wrong or more specifically one rotation axis is missing. This is logical because the rotation is only build from the normal. So how can I get the full rotation?
Here you see that the top and bottom quads are just rotated around the x axis but the y axis rotation is missing: