38

Three.js での非投影に関する優れたスタックの質問 ( 1、2 )がいくつかあります。つまり、ブラウザーの (x,y) マウス座標を Three.js キャンバス空間の (x,y,z) 座標に変換する方法です。ほとんどの場合、次のパターンに従います。

    var elem = renderer.domElement, 
        boundingRect = elem.getBoundingClientRect(),
        x = (event.clientX - boundingRect.left) * (elem.width / boundingRect.width),
        y = (event.clientY - boundingRect.top) * (elem.height / boundingRect.height);

    var vector = new THREE.Vector3( 
        ( x / WIDTH ) * 2 - 1, 
        - ( y / HEIGHT ) * 2 + 1, 
        0.5 
    );

    projector.unprojectVector( vector, camera );
    var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
    var intersects = ray.intersectObjects( scene.children );

私は逆のことを試みてきました - 「画面から世界へ」の空間ではなく、「世界から画面へ」の空間へ。Three.js 内のオブジェクトの位置がわかっている場合、画面上での位置を特定するにはどうすればよいですか?

この問題に対する公開された解決策はないようです。これに関する別の質問が Stackに表示されましたが、著者は、機能しない機能で問題を解決したと主張しています。彼らのソリューションは投影されたレイを使用しません。2D から 3D への変換は unprojectVector() を使用するため、3D から 2D へのソリューションには projectVector() が必要になると確信しています。

Github で公開されているこの問題もあります。

どんな助けでも大歓迎です。

4

3 に答える 3

37

これを試してください：

var width = 640, height = 480;
var widthHalf = width / 2, heightHalf = height / 2;

var vector = new THREE.Vector3();
var projector = new THREE.Projector();
projector.projectVector( vector.setFromMatrixPosition( object.matrixWorld ), camera );

vector.x = ( vector.x * widthHalf ) + widthHalf;
vector.y = - ( vector.y * heightHalf ) + heightHalf;
于 2012-07-23T00:00:50.680 に答える
16

ログを取得deprecatedまたはwarningsログに記録するすべての人にとって、受け入れられる答えは、古い Three.js バージョンに対するものです。以下を使用すると、さらに簡単になります。

let pos = new THREE.Vector3();
pos = pos.setFromMatrixPosition(object.matrixWorld);
pos.project(camera);

let widthHalf = canvasWidth / 2;
let heightHalf = canvasHeight / 2;

pos.x = (pos.x * widthHalf) + widthHalf;
pos.y = - (pos.y * heightHalf) + heightHalf;
pos.z = 0;

console.log(pos);
于 2016-10-31T18:31:08.600 に答える