我看过一些用 css3 3d 翻译完成的很酷的 3D 东西,例如:http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html 9需要网络工具包)
有人知道碰撞检测的方法吗?我可以看到如何在 2D 中做到这一点,但我无法理解在 3D 中做到这一点所需的数学知识。不过,似乎某些 JavaScript 可以实现它。
在上面的链接中,平面 (div) 有时会相交,如果它们能互相避开就好了。
有什么想法吗?
最佳答案
如果您有一个三 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。
关于3d - css3 3d 翻译 : collision detection,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6169201/