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

Question

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

起点是浏览器视口的右上角，远离屏幕
终点为中心（均横浏览器视口的中心和垂直中心），靠近屏幕。

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

Google Fu 这次对我不起作用...我在这里缺少什么？谢谢

Answer 1

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

屏幕-space坐标，也称为归一化设备坐标（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

所以如果你想让右上角到中心-中心-近，按照上面的table：

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. It's called "unproject" because it does the opposite of "project" 的更多信息。

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

How to get the Vector3 of a point from the viewport perspective in three.js?

three.js

react-three-fiber