Three.js 2D X，Y坐標始終位於鏡頭前的3D X，Y，Z坐標

Question

我看了這個問題：

鼠標/畫布X，Y到Three.js世界X，Y，Z

並在我的代碼中實現了它，問題是我似乎無法像其他人所說的那樣使它工作。

我需要通過X和Y屏幕坐標將對象放置在相機前面，而不必通過鼠標。

該物體將位於攝像機前方的指定距離處，該距離可以是預定義的最大距離，也可以是計算出的物體距離。

注意：“我的相機”可以位於場景中的任何位置並可以面對任何方向

這是我的代碼：

this.reticlePos.x = 500;
this.reticlePos.y = 300;
this.reticlePos.z = 0.5;

this.projector.unprojectVector(this.reticlePos, this.camera);

//check for collisions, if collisions set distance to collision distance
var distance = this.RETICLE_RADIUS;

var direction = new THREE.Vector3( 0, 0, -1 );
direction.applyQuaternion( this.camera.quaternion );

this.rayCaster.set(this.camera.position, direction);
var collisionResults = this.rayCaster.intersectObjects(this.sceneController.obstacles);

if( collisionResults.length !== 0 ) {
    // console.log('Ray collides with mesh. Distance :' + collisionResults[0].distance);
    distance = collisionResults[0].distance - 20;
}

// set the reticle position
var dir = this.reticlePos.clone().sub( this.camera.position ).normalize();

var pos = this.camera.position.clone().add( dir.multiplyScalar( distance ) );

this.reticleMesh.position.copy( pos );

如您所見，它與鏈接的問題非常相似，但是我看不到相機前面的物體。

任何對此的見解將不勝感激。

Answer 1

我自己為以后檢查此問題的任何人找出了答案。

要獲取屏幕坐標，我需要轉換來自陀螺儀的一些輸入數據，但沒有意識到我仍然需要對計算出的屏幕坐標進行以下操作：

this.reticlePos.x = ( this.reticlePos.x / window.innerWidth ) * 2 - 1;
this.reticlePos.y = - ( this.reticlePos.y / window.innerHeight ) * 2 + 1;

完成此操作后，一切都會按預期進行。