我目前正在开发一个涉及3D点旋转的JavaScript项目.使用简单的三角,我已经勾勒自己的3D旋转点的算法,但我必须处理庞大的数据量(300万点)和我的功能极大地降低了运行时(FPS的速率将下降60至12).
我正在寻找另一个3D点旋转算法 ......
通过X,Y和Z轴的角度(PITCH,YAW和ROLL)旋转原点周围的点
有一个相当好的效率(不要太担心这个,它总是比我的快)
是用JavaScript,类似C的代码或伪代码编写的
任何帮助将不胜感激 :)
上下文:3D点云渲染器(我希望每个点都旋转)
旋转矢量可以描述为具有该矢量的旋转矩阵的乘积.关于俯仰,滚转和偏航的德语维基百科页面描述了给定欧拉旋转角度的旋转矩阵.
有了这些信息,所有具有相同角度的点的旋转都可以写成JavaScript函数,其中points数组是全局的:
function rotate(pitch, roll, yaw) { var cosa = Math.cos(yaw); var sina = Math.sin(yaw); var cosb = Math.cos(pitch); var sinb = Math.sin(pitch); var cosc = Math.cos(roll); var sinc = Math.sin(roll); var Axx = cosa*cosb; var Axy = cosa*sinb*sinc - sina*cosc; var Axz = cosa*sinb*cosc + sina*sinc; var Ayx = sina*cosb; var Ayy = sina*sinb*sinc + cosa*cosc; var Ayz = sina*sinb*cosc - cosa*sinc; var Azx = -sinb; var Azy = cosb*sinc; var Azz = cosb*cosc; for (var i = 0; i < points.length; i++) { var px = points[i].x; var py = points[i].y; var pz = points[i].z; points[i].x = Axx*px + Axy*py + Axz*pz; points[i].y = Ayx*px + Ayy*py + Ayz*pz; points[i].z = Azx*px + Azy*py + Azz*pz; } }
其中大部分是设置旋转矩阵,如文章中所述.循环内的最后三行是矩阵乘法.你已经提出了不想进入矩阵的观点,但这几乎不会令人生畏,是吗?迟早你会遇到更多的矩阵,你应该准备好处理它们.你需要的东西 - 主要是乘法 - 很简单.根据您的要求,不需要像反转矩阵那样复杂的东西.
无论如何,这表现得相当快300,000分.我能够旋转那个大小的点云,并在大约10ms内在1000px× 1000px画布上渲染它.
来自维基百科:
如果您将每个矩阵乘以每个矩阵,它们将按您想要的数量旋转.
例如,如果我想旋转点[1, 0, 0]
绕Z轴旋转90°(在xy平面),sin(90) = 1
并且cos(90) = 0
使你得到这样的:
| 0 -1 0 | |1| |0| | 1 0 0 | * |0| = |1| | 0 0 1 | |0| |0|