Math Help: 3d Modeling / Three.js - Rotating figure dynamically

Question

This is a big one for any math/3d geometry lovers. Thank you in advance.

Overview

I have a figure created by extruding faces around twisting spline curves in space. I'm trying to place a "loop" (torus) oriented along the spline path at a given segment of the curve, so that it is "aligned" with the spline. By that I mean the torus's width is parallel to the spline path at the given extrusion segment, and it's height is perpendicular to the face that is selected (see below for picture).

Data I know:

I am given one of the faces of the figure. From that I can also glean that face's centroid (center point), the vertices that compose it, the surrounding faces, and the normal vector of the face.

Current (Non-working) solution outcome:

I can correctly create a torus loop around the centroid of the face that is clicked. However, it does not rotate properly to "align" with the face. See how they look a bit "off" below.

Here's a picture with the material around it:

and here's a picture with it in wireframe mode. You can see the extrusion segments pretty clearly.

Current (Non-working) methodology:

I am attempting to do two calculations. First, I'm calculating the the angle between two planes (the selected face and the horizontal plane at the origin). Second, I'm calculating the angle between the face and a vertical plane at the point of origin. With those two angles, I am then doing two rotations - an X and a Y rotation on the torus to what I hope would be the correct orientation. It's rotating the torus at a variable amount, but not in the place I want it to be.

Formulas:

In doing the above, I'm using the following to calculate the angle between two planes using their normal vectors:

Dot product of normal vector 1 and normal vector 2 = Magnitude of vector 1 * Magnitude of vector 2 * Cos (theta)

Or:

(n1)(n2) = || n1 || * || n2 || * cos (theta)

Or:

Angle = ArcCos { ( n1 * n2 ) / ( || n1 || * || n2 || ) }

To determine the magnitude of a vector, the formula is:

The square root of the sum of the components squared.

Or:

Sqrt { n1.x^2 + n1.y^2 + n1.z^2 }

Also, I'm using the following for the normal vectors of the "origin" planes:

Normal vector of horizontal plane: (1, 0, 0)

Normal vector of Vertical plane: (0, 1, 0)

I've thought through the above normal vectors a couple times... and I think(?) they are right?

Current Implementation:

Below is the code that I'm currently using to implement it. Any thoughts would be much appreciated. I have a sinking feeling that I'm taking a wrong approach in trying to calculate the angles between the planes. Any advice / ideas / suggestions would be much appreciated. Thank you very much in advance for any suggestions.

Function to calculate the angles:

this.toRadians = function (face, isX)
{
    //Normal of the face
    var n1 = face.normal;

    //Normal of the vertical plane
    if (isX)
        var n2 = new THREE.Vector3(1, 0, 0); // Vector normal for vertical plane. Use for Y rotation.
    else
        var n2 = new THREE.Vector3(0, 1, 0); // Vector normal for horizontal plane. Use for X rotation.

    //Equation to find the cosin of the angle. (n1)(n2) = ||n1|| * ||n2|| (cos theta)

    //Find the dot product of n1 and n2.
    var dotProduct = (n1.x * n2.x) + (n1.y * n2.y) + (n1.z * n2.z);

    // Calculate the magnitude of each vector
    var mag1 = Math.sqrt (Math.pow(n1.x, 2) + Math.pow(n1.y, 2) + Math.pow(n1.z, 2));
    var mag2 = Math.sqrt (Math.pow(n2.x, 2) + Math.pow(n2.y, 2) + Math.pow(n2.z, 2));

    //Calculate the angle of the two planes. Returns value in radians. 
    var a = (dotProduct)/(mag1 * mag2);

    var result = Math.acos(a);

    return result;
}

Function to create and rotate the torus loop:

this.createTorus = function (tubeMeshParams)
{
    var torus = new THREE.TorusGeometry(5, 1.5, segments/10, 50);
    fIndex = this.calculateFaceIndex();

    //run the equation twice to calculate the angles
    var xRadian = this.toRadians(geometry.faces[fIndex], false);
    var yRadian = this.toRadians(geometry.faces[fIndex], true);

    //Rotate the Torus 
    torus.applyMatrix(new THREE.Matrix4().makeRotationX(xRadian));
    torus.applyMatrix(new THREE.Matrix4().makeRotationY(yRadian));
    torusLoop = new THREE.Mesh(torus, this.m);

    torusLoop.scale.x = torusLoop.scale.y = torusLoop.scale.z = tubeMeshParams['Scale'];

    //Create the torus around the centroid
    posx = geometry.faces[fIndex].centroid.x;
    posy = geometry.faces[fIndex].centroid.y;
    posz = geometry.faces[fIndex].centroid.z;

    torusLoop.geometry.applyMatrix(new THREE.Matrix4().makeTranslation(posx, posy, posz));
    torusLoop.geometry.computeCentroids();
    torusLoop.geometry.computeFaceNormals();
    torusLoop.geometry.computeVertexNormals();

    return torusLoop;
}

Answer 1

I found I was using an incorrect approach to do this. Instead of trying to calculate each angle and do a RotationX and a RotationY, I should have done a rotation by axis. Definitely was over thinking it.

makeRotationAxis(); is a function built into three.js.