css3三维平移:碰撞检测



我看到了一些用css3三维翻译完成的很酷的3D内容,例如:http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html9需要网络工具包)

有人知道碰撞检测的方法吗?我可以看到一个人如何在2D中做到这一点,但我无法理解在3D中做这件事所需要的数学。尽管如此,似乎有些JavaScript可以实现它

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

有什么想法吗?

如果你有一个三角形p0,p1,p2(三个分量向量)和一个线段x,y,你可以通过求解矩阵线性方程来很容易地检查该线段是否与三角形相交:

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

其中A B C是标量系数,"T"是矩阵转置(即,(A B C)T是三个变量的列)。((p1-p)(p2-p0)(x-y))在这里代表具有相应向量作为列的3x3矩阵,并且x-p0也是由三个分量组成的列。

你求解这个系统并找到A、B和C。如果A>0,B>0,A+B<1和0<C<1则存在交叉点。

在三维空间中有两个三角形,你可以通过检查第一个三角形的边与第二个三角形的侧边,然后检查第二个三角的边与第一个三角的侧边来检查它们是否相交。我希望这能有所帮助。

更新:对公式做了一些更改。

Update2:如果方程无法求解,则线段与三角形位于同一平面上。它使任务变得更容易:将坐标转换到该平面,并找出线段是否与二维空间中的三角形相交。。。

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

最新更新