ThreeJS：如何将屏幕2D坐标转换为摄像机近平面上的世界3D坐标？ R73

Question

我在坐标转换方面遇到了一些麻烦。 我有一个在屏幕上已知坐标（x，y）的对象，并且我想将其转换为世界坐标（x，y，z），就像它在相机近平面上投影出来的那样。

到目前为止，我可以像这样在Z平面上进行投影：

var vector = new THREE.Vector3( mouse.x, mouse.y, 1 );
vector.unproject( camera );

但是不幸的是，我无法进一步进行 :(

- Andrey Kiselev

Answer 1

如果您将z分量设为-1，则会被投影到近平面上，而不是远平面：

var vector = new THREE.Vector3( mouse.x, mouse.y, -1 ).unproject( camera );

假设mouse.x和mouse.y的值在-1和1之间。

three.js版本为r.73。

- Brendan Annable

---

谢谢！那个完美地解决了问题，当然。代码的其他部分搞乱了我的坐标。当然，我的鼠标在截锥体坐标范围内。 - Andrey Kiselev

Answer 2

我找到了另一个答案，不知道是否适合你。

var getSceneToWorld = function(dx, dy) {
var projector = new THREE.Projector();
var mouse3D = new THREE.Vector3(dx / window.innerWidth * 2 - 1, -dy / window.innerHeight * 2 + 1, 0.5);
projector.unprojectVector(mouse3D, camera);
mouse3D.sub(camera.position);
mouse3D.normalize(); 
var rayCaster = new THREE.Raycaster(camera.position, mouse3D); var scale = window.innerWidth * 2; 
var rayDir = new THREE.Vector3(rayCaster.ray.direction.x * scale, rayCaster.ray.direction.y * scale, rayCaster.ray.direction.z * scale);
var rayVector = new THREE.Vector3(camera.position.x + rayDir.x, camera.position.y + rayDir.y, camera.position.z + rayDir.z); 
return rayVector; 
} 

参考资料：http://barkofthebyte.azurewebsites.net/post/2014/05/05/three-js-projecting-mouse-clicks-to-a-3d-scene-how-to-do-it-and-how-it-works

该文介绍了如何使用Three.js将鼠标点击事件投射到3D场景中，并且提供了实现的详细步骤以及原理解释。

- 黄祥龙

---

请注意，此答案已经过时，因为自2017年4月以来，threejs API 已经发生了重大变化。 - Mike 'Pomax' Kamermans