3D point rotation algorithm

by

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.

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.

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.

More Related Contents:

  1. Cartesian product of multiple arrays in JavaScript
  2. Fastest way to flatten / un-flatten nested JSON objects
  3. Javascript Array.sort implementation?
  4. JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
  5. Fast stable sorting algorithm implementation in javascript
  6. How does this recursion work?
  7. Three.js – Orthographic camera
  8. Improving performance of click detection on a staggered column isometric grid
  9. How do I sort an array of objects based on the ordering of another array?
  10. Is there a way to calculate 3D rotation on X and Y axis from a 4×4 matrix
  11. Efficient way to insert a number into a sorted array of numbers?
  12. Recursively print all permutations of a string (Javascript)
  13. Where is my implementation of rot13 in JavaScript going wrong?
  14. Converting World coordinates to Screen coordinates in Three.js using Projection
  15. Bresenham algorithm in Javascript
  16. Permutations without recursive function call
  17. Sorting Array with JavaScript reduce function
  18. Find difference between two strings in JavaScript
  19. Check if polygon is inside a polygon
  20. Remove duplicate objects from an array using javascript
  21. Get the item that appears the most times in an array
  22. Optimized merge sort faster than quicksort
  23. Compare Strings Javascript Return %of Likely
  24. Combine json arrays by key, javascript
  25. How to find horizon line efficiently in a high-altitude photo?
  26. Number.sign() in javascript
  27. How to render clipped surfaces as solid objects
  28. Three.js add an object to a group but keep global position/rotation/scale as it was
  29. Diamond-square algorithm not working (rewrite code from JS to JAVA)
  30. Rotate a div using javascript

Leave a Comment