3d - css3 3d 翻译 : collision detection

标签 3d css collision-detection

我看过一些用 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/

相关文章:

android - 如何在 Android 中创建这样的 3d 动画?

3d - gnuplot:如何在 3D 图中使 xy、xz 和 yz 平面不透明/实体?

java - 修复了 3D 相机在它面对的方向上移动的问题?

jquery - div 自动换行

java - LWJGL 仅旋转屏幕上的一个对象

javascript - 我想每次都将不同的变量传递给循环中动态创建的按钮

html - Bootstrap 按钮网格大小

java - 碰撞检测问题

algorithm - 两个移动矩形之间的最小距离

C++ 碰撞检测在最后一次检查时不起作用?