Question

I have seen some cool 3D stuff done with css3 3d translations, for instance: http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html
9requires webkit)

Dose anyone know of a way to do collision detection? I can see how one could do it in 2D but I can’t fathom the math it would require to do it in 3D. Still, it seems like some JavaScript could pull it off.

In the above link the planes (divs) intersect at times, it would be cool if they would avoid each other.

Any ideas?

Answer 1

If you have a triangle p0, p1, p2 (three-component vectors) and a segment x,y, you can easily check if that segment intersects the triangle by solving this matrix linear equation:

((p1-p0) (p2-p0) (x-y)) (A B C)T = x-p0

where A B C are scalar coefficients, ‘T’ is the matrix transpose (that is, (A B C)T is a column of three variables). ((p1-p0) (p2-p0) (x-y)) stands here for the 3×3 matrix with corresponding vectors as columns, and x-p0 is a column of three components, too.

You solve this system and find A, B, and C. If A>0, B>0, A+B<1 and 0 < C < 1 then there is intersection.

Having two triangles in 3d space, you can check if they intersect by checking the sides of the first triangle agains the second and then the sides of the second triangle against the first. I hope this helps.

Update: changed the formula a bit.

Update2: if the equation cannot be solved, then the segment is in the same plane as the triangle. It makes the task even easier: translate your coordinates to that plane and find if the segment intersects the triangle in 2d space…

Update3: actually, the condition was wrong: A and B should be more then 0 but their sum A+B should be less then 1.