javascript - 3D点旋转算法

Question

我目前正在从事一个涉及 3D 点旋转的 JavaScript 项目。使用简单的三 Angular 学，我绘制了自己的 3D 点旋转算法，但我必须处理大量数据(+300 000 点)并且我的函数大大减慢了运行时间(FPS 速率从 60 下降到 12)。

I'm looking for another 3D point rotation ALGORITHM which...

1. rotates points around origin by X, Y and Z axes' angles (PITCH, YAW and ROLL)
2. has a quite good efficiency (don't worry about this too much, it will always be faster than mine)
3. is written in JavaScript, C-like code or pseudo-code

任何帮助将不胜感激:)

上下文:3D点云渲染器(我希望每个点都旋转)

Answer 1

旋转向量可以描述为旋转矩阵与该向量的乘积。 German Wikipedia page on pitch, roll and yaw描述给定欧拉旋转 Angular 旋转矩阵。

有了这些信息，所有具有相同 Angular 点的旋转可以写成 JavaScript 函数，其中点数组是全局的:

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 点来说，它的表现相当快。我能够旋转那个大小的点云，并在大约 10 毫秒内将其渲染到 1000 像素×1000 像素的 Canvas 上。