javascript - Three.js 圆柱体在3d平面内旋转

Question

我一直遇到线宽问题(与窗口上的 ANGLE 有关)。我求助于在 2 点之间(在 3D 空间中)使用圆柱体。我已经解决了根据 2 点-3D 距离公式获取圆柱体长度的问题。

我在获取 Angular 时遇到了问题。我希望圆柱体旋转，以便找到的 Angular 能够使圆柱体连接两点。

本质上，我试图找到一种方法来找到 (x1,y1,z1) 和 (x2,y2,z2) 之间的 Angular 。并让它修改圆柱体(cylinder.rotation.x、cylinder.rotation.y 和 cylinder.rotation.z)。

Answer 1

您可以使用变换矩阵来做到这一点。下面是一些示例代码:

function createCylinderFromEnds( material, radiusTop, radiusBottom, top, bottom, segmentsWidth, openEnded)
{
    // defaults
    segmentsWidth = (segmentsWidth === undefined) ? 32 : segmentsWidth;
    openEnded = (openEnded === undefined) ? false : openEnded;

    // Dummy settings, replace with proper code:
    var length = 100;
    var cylAxis = new THREE.Vector3(100,100,-100);
    var center = new THREE.Vector3(-100,100,100);
    ////////////////////

    var cylGeom = new THREE.CylinderGeometry( radiusTop, radiusBottom, length, segmentsWidth, 1, openEnded );
    var cyl = new THREE.Mesh( cylGeom, material );

    // pass in the cylinder itself, its desired axis, and the place to move the center.
    makeLengthAngleAxisTransform( cyl, cylAxis, center );

    return cyl;
}

// Transform cylinder to align with given axis and then move to center
function makeLengthAngleAxisTransform( cyl, cylAxis, center )
{
    cyl.matrixAutoUpdate = false;

    // From left to right using frames: translate, then rotate; TR.
    // So translate is first.
    cyl.matrix.makeTranslation( center.x, center.y, center.z );

    // take cross product of cylAxis and up vector to get axis of rotation
    var yAxis = new THREE.Vector3(0,1,0);
    // Needed later for dot product, just do it now;
    // a little lazy, should really copy it to a local Vector3.
    cylAxis.normalize();
    var rotationAxis = new THREE.Vector3();
    rotationAxis.crossVectors( cylAxis, yAxis );
    if ( rotationAxis.length() < 0.000001 )
    {
        // Special case: if rotationAxis is just about zero, set to X axis,
        // so that the angle can be given as 0 or PI. This works ONLY
        // because we know one of the two axes is +Y.
        rotationAxis.set( 1, 0, 0 );
    }
    rotationAxis.normalize();

    // take dot product of cylAxis and up vector to get cosine of angle of rotation
    var theta = -Math.acos( cylAxis.dot( yAxis ) );
    //cyl.matrix.makeRotationAxis( rotationAxis, theta );
    var rotMatrix = new THREE.Matrix4();
    rotMatrix.makeRotationAxis( rotationAxis, theta );
    cyl.matrix.multiply( rotMatrix );
}

这不是我写的。查找完整的工作示例 here .它是第 5 章的一部分:来自这个很棒的免费 Interactive 3D Graphics course 的矩阵使用 three.js 进行教学。

强烈推荐。如果您没有机会尝试转换，您可能想从第 4 章开始。

作为旁注。您也可以稍微作弊并使用 Matrix4 的 lookAt() 来解决旋转问题，偏移平移以便枢轴位于圆柱体的尖端，然后将矩阵应用于圆柱体。