1

私は線幅の問題を抱えていました（ウィンドウの角度と関係があります）。私は 2 点間 (3D 空間内) で円柱を使用することに頼りました。2 点 3D 距離式に基づいて円柱の長さを取得する問題は既に解決しています。

ただ、角度がつかめずに困っています。円柱が2点を結ぶように、見つかった角度になるように円柱を回転させたいと思います。

基本的に、(x1,y1,z1) と (x2,y2,z2) の間の角度を見つける方法を見つけようとしています。そして、シリンダー (cylinder.rotation.x、cylinder.rotation.y、cylinder.rotation.z) を変更します。

4

1 に答える 1

2

これを行うには、変換マトリックスを使用できます。コード例を次に示します。

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

私はこれを書いていません。ここで完全な作業サンプルを見つけてください。これは、three.js を使用して教えられるこの素晴らしい無料のインタラクティブ 3D グラフィックス コースの第 5 章: 行列の一部です。

インタラクティブ 3D グラフィックス コース

心からお勧めします。変換で遊ぶ機会がなかった場合は、第 4 章から始めることをお勧めします。

補足として。少しごまかして、Matrix4 を使用lookAt()して回転を解決し、平行移動をオフセットしてピボットが円柱の先端にくるようにし、行列を円柱に適用することもできます。

于 2013-07-29T21:31:40.757 に答える