THREE.js将3D向量转化为2D像素位置，解释z坐标

Question

我参考了这篇SO帖子，它解释了如何将一个三维空间中的点转换为显示器上实际像素位置的方法。这是该函数的代码，为方便复制。

function toScreenPosition(obj, camera)
{
    var vector = new THREE.Vector3();

    var widthHalf = 0.5*renderer.context.canvas.width;
    var heightHalf = 0.5*renderer.context.canvas.height;

    obj.updateMatrixWorld();
    vector.setFromMatrixPosition(obj.matrixWorld);
    vector.project(camera);

    vector.x = ( vector.x * widthHalf ) + widthHalf;
    vector.y = - ( vector.y * heightHalf ) + heightHalf;

    return { 
        x: vector.x,
        y: vector.y
    };

};

我注意到使用vector.project(camera)投影后，vector.z实际上不是0。对于我的特定设置，vector.z约为0.8（这并不意味着对于一般问题有多大影响）。

那么，我应该如何解释vector.z？它实际上代表什么？

- Carpetfizz

Answer 1

vector.z表示点距离屏幕的深度。对于屏幕上的像素或位置，深度并不重要，因为它不会影响屏幕上的x或y位置。因此，该向量的这个组件不是解决方案的一部分，因此被忽略。

至于为什么它不是0，那是因为投影将顶点与相机矩阵相乘。假设相机的位置可以查看您需要的所有内容，并且没有指向其他地方，则投影函数在您和场景之间放置距离（即深度）。

- WAFFO

---

谢谢，您介意再解释一下最后一段吗？我的相机相对于世界在z=1处（所以我可以看到我的物体），但其他所有东西都没有改变。 “您和场景”之间的距离到底是多少？特别是如果它以像素为单位。 - Carpetfizz

不应该以像素为单位考虑它，因为它需要像 x 和 y 一样进行转换，而且由于显示器没有深度，这将是一个无用的表示。场景被广泛使用。因此，在这个函数中，vector.z 将是 WebGL 剪辑空间中 camera 和 obj 之间的“距离”。有关更具体的数学细节，我找到了一个很酷的页面，解释了 WebGL 剪辑空间和投影，链接在这里：https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection - WAFFO