数学帮助: 3d建模/ Three.js -动态旋转图形

Question

对于任何数学/三维几何爱好者来说，这是一个很大的问题。提前谢谢你。

概述

我有一个图形，通过挤压曲面周围的扭曲样条曲线在空间。我试图在给定的曲线段沿样条路径放置一个“循环”(圆环)，以便它与样条“对齐”。我的意思是环面的宽度与给定挤压段上的样条路径平行，它的高度与所选择的面垂直(见下图)。

我知道的数据：

我得到了这个人物的一张脸。由此，我还可以收集脸的质心(中心点)，构成它的顶点，周围的脸，以及脸的法线矢量。

当前(不工作)解决方案结果：

我可以正确地创建一个环面环，围绕着被点击的脸的质心。然而，它没有正确地旋转，以“对齐”的脸。看看下面他们看上去有多“不对”。

下面是一张图片，上面有一些材料：

​

​

这是一张线框模式下的图片。你可以很清楚地看到挤压段。

​

​

当前(非工作)方法：

我试着做两次计算。首先，我在计算两个平面之间的角度(选定的面和原点的水平面)。第二，我在计算在原点的面和垂直平面之间的角度。用这两个角度，我做了两个旋转-一个X和一个Y旋转的环面，我希望是正确的方向。它以可变的量旋转着环面，但不是在我想要的地方。

公式：

在进行上述操作时，我使用以下方法来计算两个平面之间的角度，使用它们的法向量：

法向量1和法向量2的点积=矢量的大小1*矢量2的大小(θ)

或者：

( n1 )( n2 ) =theta

或者：

角形= ArcCos {( n1 * n2 )/(\x{x{e}

要确定向量的大小，公式是：

分量平方之和的平方根。

或者：

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

另外，我对“原点”平面的法向量使用了以下方法：

平面法向量：(1，0，0)

垂直平面法向量：(0，1，0)

我想过几次以上的法向量.我认为(？)他们是对的？

当前实现：

下面是我目前用来实现它的代码。任何想法都将不胜感激。我有一种下沉的感觉，我在试图计算飞机之间的角度时，采取了错误的方法。如有任何意见/想法/建议，将不胜感激。谢谢您的任何建议。

计算角度的函数：

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

函数来创建和旋转圆环：

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

我发现我用了不正确的方法来做这件事。我不应该试图计算每个角度，做一个RotationX和一个RotationY，我应该做一个轴旋转。肯定是想太多了。

makeRotationAxis()；是内置于three.js中的函数。