three.js - three.js中如何从视口(viewport)视角获取一个点的Vector3？

Question

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

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

问题是，我怎样才能将 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

所以如果你想让右上角到中心-中心-附近，按照上面的表格:

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" 相反.