1

私は問題に苦しんでいます: WebGL アニメーションの上に DIV を配置する必要があります。meshaに基づいて aを回転させてPlaneGeometry、長方形のサイズを占有します。次に、そこに DIV を配置したいので、X、Y 座標とレンダリングされた平面の寸法を知る必要があります。

ここに画像の説明を入力

クラスを試してみましたが、を使用しTHREE.Projectionて頂点を投影しても役に立ちませんでした。次のように計算されました。[0].projectVector

x: -0.1994540991160383
y: 0.17936202821347358
z: 0.9970982652556688

...それは私にはほとんど役に立ちませんでした。

4

2 に答える 2

1

レンダラーのキャンバスを基準にして 3D ポイントpositionをスクリーン座標に投影するには、次のようにします。

var projector = new THREE.Projector();
var pos = projector.projectVector( position, camera );

var xcoord = Math.round( (  pos.x + 1 ) * canvas.width  / 2 );
var ycoord = Math.round( ( -pos.y + 1 ) * canvas.height / 2 );

ここでcanvasは、renderer.domElementです。

可視世界の左上隅にある点は ( 0, 0 ) に投影されます。

three.js r.53

于 2012-12-25T20:34:02.633 に答える
0

解決策を見つけました。左上のポイントは実際にはplaneの頂点の 0 インデックスですが、既に実行された変換も考慮する必要があります。

function calculateLayer()
{
    // multiplyVector3 applies the performed transformations to the object's coordinates.
    var topLeft = tubeCard.matrixWorld.multiplyVector3( tubeCard.geometry.vertices[0].clone() );
    // index 24 is the bottom right, because the plane has 4x4 faces
    var bottomRight = tubeCard.matrixWorld.multiplyVector3( tubeCard.geometry.vertices[24].clone() );
    return {
            topLeft: convert3Dto2D( topLeft ),
            bottomRight: convert3Dto2D( bottomRight )
        }
}

function convert3Dto2D( positionVector )
{
    var projector = new THREE.Projector();
    var pos = projector.projectVector( positionVector, camera );

    var xcoord = Math.round( (  pos.x + 1 ) * window.innerWidth  / 2 );
    var ycoord = Math.round( ( -pos.y + 1 ) * window.innerHeight / 2 );

    return { x: xcoord, y: ycoord };
}

したがって、変換を適用して正しい座標を取得したら、WestLangley のおかげで 3D から 2D への変換を使用するだけです。

于 2012-12-26T17:42:24.433 に答える