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 Answer 1

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\$
3
  • \$\begingroup\$ That's the right way to do it. \$\endgroup\$ Jan 1, 2015 at 18:58
  • 2
    \$\begingroup\$ make sure to normalize xAxis, yAxis and zAxis. \$\endgroup\$
    – mklingen
    Jan 1, 2015 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, 2015 at 15:52

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .