3D点旋转算法 [英] 3D point rotation algorithm

问题描述

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

I'm currently working on a JavaScript project which involves 3D point rotation. Using simple trigonometry, I have sketched my own 3D point rotation algorithm, but I have to deal with a huge amount of data (+300 000 points) and my function slows down the runtime substantially (the FPS rate drops from 60 to 12).

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

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

1. 将点绕原点旋转 X、Y 和 Z 轴的角度(PITCH、YAW 和 ROLL)
2. 有相当不错的效率(这个不用太担心，它总会比我的快)
3. 使用 JavaScript、类 C 代码或伪代码编写

任何帮助将不胜感激:)

Any help will be greatly appreciated :)

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

推荐答案

旋转向量可以描述为旋转矩阵与该向量的乘积.关于俯仰、滚转和偏航的德国维基百科页面描述了给定欧拉旋转角.

A rotated vector can be described as a product of a rotation matrix with that vector. The German Wikipedia page on pitch, roll and yaw describes the rotation matrix for given Euler rotation angles.

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

With that information, the rotation of all points with the same angles can be written as JavaScript function, where the points array is global:

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;
    }
}

其中大部分是按照文章中的描述设置旋转矩阵.循环内的最后三行是矩阵乘法.您已经指出不想进入矩阵，但这并不可怕，是吗?迟早你会遇到更多的矩阵，你应该准备好处理它们.你需要的东西–乘法，主要是–很简单.您的要求不需要更复杂的东西，例如求逆矩阵.

Most of that is setting up the rotation matrix as described in the article. The last three lines inside the loop are the matrix multiplication. You have made a point of not wanting to get into matrices, but that's hardly intimidating, is it? Sooner or later you will encounter more matrices and you should be prepared to deal with them. The stuff you need – multiplication, mainly – is simple. The more complicated stuff like inverting matrices is not needed for your requirements.

无论如何，它在 300,000 点上的表现相当快.我能够旋转该大小的点云，并在大约 10 毫秒内将其渲染到 1000 像素和 1000 像素的画布上.

Anyway, that performs reasonably fast for 300,000 points. I was able to rotate a point cloud of that size and render it on a 1000px &times 1000px canvas in about 10ms.

这篇关于3D点旋转算法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！