1
\$\begingroup\$

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:

cube

\$\endgroup\$
1
\$\begingroup\$

Ok, think I got it. I now build the rotation matrix directly from the vectors:

xAxis = cross(normal, (p1 - p0))
yAxis = cross(normal, xAxis)
zAxis = normal

rotationMatrix = [
    xAxis.x, yAxis.x, zAxis.x,
    xAxis.y, yAxis.y, zAxis.y,
    xAxis.z, yAxis.z, zAxis.z
]
\$\endgroup\$
  • \$\begingroup\$ That's the right way to do it. \$\endgroup\$ – Pieter Geerkens Jan 1 '15 at 18:58
  • 2
    \$\begingroup\$ make sure to normalize xAxis, yAxis and zAxis. \$\endgroup\$ – mklingen Jan 1 '15 at 18:59
  • \$\begingroup\$ @mklingen yes sure..in my final code I normalized the axes before putting them into the matrix. \$\endgroup\$ – redreggae Jan 2 '15 at 15:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.