如何在three.js中从视口角度获取一个点的Vector3？

Question

我需要创建 2 个THREE.Vector3 点。从浏览器视口的角度来看。

• 起点是浏览器视口的右上角， 远离屏幕
• 结束点是中心（水平 浏览器视口的中心和垂直中心），靠近 屏幕。

问题是，如何将 web 坐标转换为 three.js 坐标，以便开始制作这个三次贝塞尔曲线 3？

Google Fu 这次不适合我了...我在这里缺少什么？谢谢

Answer 1

您要查找的是Vector3.unproject()。此机制通过将[-1, 1] 范围内的屏幕空间坐标从相机“取消投影”转换为 3D 位置。

屏幕空间坐标，也称为标准化设备坐标 (NDC)，如下所示：

x = -1  // left side of the screen
x = 1   // right side of the screen
y = -1  // bottom
y = 1   // top
z = -1  // far plane
z = 1   // near plane

因此，如果您希望右上角的右上角为 center-center-near，请按照上表进行操作：

var camera = new THREE.PerspectiveCamera(/* ... */);

// Start in NDC space
var cornerVec = new THREE.Vector3(1, 1, -1);
var middleVec = new THREE.Vector3(0, 0, 1);

// Convert to 3D space
cornerVec.unproject(camera);
middleVec.unproject(camera);

console.log(cornerVec);
console.log(middleVec);

您可以阅读有关Vector3.unproject() in the docs 的更多信息。之所以称为“unproject”，是因为它与 "project" 相反。