三维点旋转算法

Question

我目前正致力于涉及3D点旋转的JavaScript项目。使用简单的三角函数，我已经绘制了自己的3D点旋转算法，但我必须处理大量数据（+300 000点），我的功能大大减慢了运行时间（FPS速率从60降至12）。

  

我正在寻找另一个3D点旋转 ALGORITHM ...

     

  
1. 通过X，Y和Z轴旋转原点周围的点。角度（PITCH，YAW和ROLL）
  
2. 有很好的效率（不要太担心这个，它总是比我快）
  
3. 是用JavaScript，C代码或伪代码编写的
  

任何帮助将不胜感激：）

上下文：3D点云渲染器（我希望每个点都可以旋转）

Answer 1

旋转矢量可以描述为具有该矢量的旋转矩阵的乘积。 German Wikipedia page on pitch, roll and yaw描述了给定欧拉旋转角度的旋转矩阵。

有了这些信息，所有具有相同角度的点的旋转都可以写成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＆amp; times 1000px画布上渲染它。

Answer 2

来自维基百科：

如果您将每个矩阵乘以每个矩阵，它们将按您想要的数量旋转。

例如，如果我想围绕z轴（xy平面），cos(90) = 0和| 0 -1 0 | |1| |0| | 1 0 0 | * |0| = |1| | 0 0 1 | |0| |0| 将点background-image旋转90°，那么你得到这个：

<div class="hero-container">
    <div class="row" id="hero"></div>
</div>