Question

我看过这个问题：

Mouse / Canvas X, Y to Three.js World 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;

完成此操作后，一切都按预期工作。

Three.js 2D X，Y与3D X，Y，Z坐标始终位于相机前方

1 个答案: