web-dev-qa-db-ja.com

3D位置を2Dスクリーン位置に変換する[r69！]

3Dオブジェクト座標を 'div'要素の2D座標に変換するためにThree.jsコードが必要です。これにより、必要な場所にテキストラベルを配置できます（これらのラベルは3Dの動きに合わせてスケーリング/移動/回転せずに）。残念ながら、私がこれまでに見て試したすべての例は、時代遅れの関数/技術を使用しているようです。私の場合、Three.jsのr69を使用していると思います。

これは、私にとってエラーを生成するだけの「古い」手法の例です。

Three.js：3D位置を2Dスクリーン位置に変換する

ここに、新しいコード（？）のスニペットを示します。これは、作業を開始するのに十分なコンテキストを提供しませんが、よりきれいに見えます。

https://github.com/mrdoob/three.js/issues/55

3dthree.js2dcoordinates
26
Darren Enns

私のプロジェクト用に次の機能を作成しました。パラメータとしてTHREE.Object3Dインスタンスとカメラを受け取り、画面上の位置を返します。

function toScreenPosition(obj, camera)
{
    var vector = new THREE.Vector3();

    var widthHalf = 0.5*renderer.context.canvas.width;
    var heightHalf = 0.5*renderer.context.canvas.height;

    obj.updateMatrixWorld();
    vector.setFromMatrixPosition(obj.matrixWorld);
    vector.project(camera);

    vector.x = ( vector.x * widthHalf ) + widthHalf;
    vector.y = - ( vector.y * heightHalf ) + heightHalf;

    return { 
        x: vector.x,
        y: vector.y
    };

};

次に、div位置を保持するためにTHREE.Object3Dを作成し（シーン内のメッシュにアタッチします）、必要なときにtoScreenPosition関数を使用して画面位置に簡単に変換し、 div要素。

var proj = toScreenPosition(divObj, camera);

divElem.style.left = proj.x + 'px';
divElem.style.top = proj.y + 'px';

ここではデモのフィドル。

34
meirm

次のようなパターンを使用して、3D位置をスクリーン座標に変換できます。

var vector = new THREE.Vector3();
var canvas = renderer.domElement;

vector.set( 1, 2, 3 );

// map to normalized device coordinate (NDC) space
vector.project( camera );

// map to 2D screen space
vector.x = Math.round( (   vector.x + 1 ) * canvas.width  / 2 );
vector.y = Math.round( ( - vector.y + 1 ) * canvas.height / 2 );
vector.z = 0;

three.js r.69

22
WestLangley

私にとって、この関数は動作します（Three.jsバージョン69）：

function createVector(x, y, z, camera, width, height) {
        var p = new THREE.Vector3(x, y, z);
        var vector = p.project(camera);

        vector.x = (vector.x + 1) / 2 * width;
        vector.y = -(vector.y - 1) / 2 * height;

        return vector;
    }
6
Julia Savinkova