3d - css3 3d 翻译 : collision detection

Question

我看过一些用 css3 3d 翻译完成的很酷的 3D 东西，例如:http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html9需要网络工具包)

有人知道碰撞检测的方法吗？我可以看到如何在 2D 中做到这一点，但我无法理解在 3D 中做到这一点所需的数学知识。不过，似乎某些 JavaScript 可以实现它。

在上面的链接中，平面 (div) 有时会相交，如果它们能互相避开就好了。

有什么想法吗？

Answer 1

如果您有一个三 Angular 形 p0、p1、p2(三分量向量)和一个线段 x、y，您可以通过求解此矩阵线性方程轻松检查该线段是否与三 Angular 形相交:

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

其中 A B C 是标量系数，“T”是矩阵转置(即 (A B C)T 是一列三个变量)。 ((p1-p0) (p2-p0) (x-y))在这里代表以对应向量为列的3x3矩阵，x-p0也是三分量的列。

解决这个系统并找到 A、B 和 C。如果 A>0，B>0，A+B<1 且 0 < C < 1，则存在交集。

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

更新:稍微更改了公式。

更新2:如果方程无法求解，则线段与三 Angular 形在同一平面内。它使任务变得更加简单:将您的坐标转换到该平面并查找线段是否与二维空间中的三 Angular 形相交...

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