reactjs - “vector.project”到相机的标准化屏幕位置？（反应三纤维）

Question

请帮我找到我的 3D 模型的每个 Vector3 的标准化屏幕位置。我尝试使用“vector.project(camera)”方法分别保存投影的屏幕矢量，但它似乎不起作用。我将这些向量用于相机光线投射。

Codesandbox：代码

标签： reactjsvectorthree.jsreact-three-fiber

Answer 1

好的，这就是你现在正在做的事情：

// Calling project() on the object's position changes its value
const vector = ref.current.position.project(camera);
const projVec = new THREE.Vector3(vector.x, vector.y, vector.z);

正如我们在评论中讨论的那样，调用.project()向量会将其重置为 [-1, 1] 范围。这就是文件所描述的。因此，当您获取模型的位置并调用 project() 时，您将其位置更改为[-1, 1]范围内的某个位置！

就像我建议的那样，您必须创建一个新向量，然后在新向量上调用 project ，而不是在对象的位置上：

// Create new vector
const projVec = new THREE.Vector3();

// Copy the object's position into new vector
projVec.copy(ref.current.position);

// Perform projection on NEW vector
projVec.project(camera);

// Now we have a vector in screen-space [-1, 1] range
console.log(projVec);