css3 3d 翻译：碰撞检测

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)

有人知道进行碰撞检测的方法吗？ 我可以看到如何在 2D 中做到这一点，但我无法理解在 3D 中做到这一点所需的数学。 尽管如此，似乎有些 JavaScript 可以成功。

在上面的链接中，平面（div）有时会相交，如果它们能互相避开会很酷。

有任何想法吗？

Answer 1

如果您有三角形 p0、p1、p2（三分量向量）和线段 x,y，则可以通过求解以下矩阵线性方程轻松检查该线段是否与三角形相交：

((p1-p0) (p2-p0) (xy)) (ABC)T = x-p0

其中 AB C 是标量系数，“T”是矩阵转置（即，（ABC）T 是三个变量的列）。 ((p1-p0) (p2-p0) (xy)) 在这里代表以对应向量为列的 3x3 矩阵，x-p0 也是由三个分量组成的列。

您求解该系统并找到 A、B 和 C。 如果 A>0, B>0, A+B<1 和 0 < C < 1 则有交集。

在 3d 空间中有两个三角形，您可以通过检查第一个三角形的边与第二个三角形的边然后检查第二个三角形的边与第一个三角形的边来检查它们是否相交。 我希望这有帮助。

更新：稍微改变了公式。

更新2：如果方程不能解，则线段与三角形在同一平面内。 它使任务变得更加容易：将您的坐标转换到该平面并查找该线段是否与二维空间中的三角形相交...

更新3：实际上，条件是错误的：A 和 B 应该大于 0，但它们的和 A+B 应该小于 1。