在研究与Three.js的互动时，我脑子里有几个问题
1）请解释什么是视口坐标？
2）它们与客户坐标的区别如何？
3）我们如何处理这个公式。
var vpx = ( eltx / div.offsetWidth ) * 2 - 1;
var vpy = - ( elty / div.offsetHeight ) * 2 + 1;
// vp->viewport, eltx->client coords,div->The div where webGL renderer has been appended.
4）为什么我们在视口系统中将第3个坐标视为0.5到1，同时取向量？
如果您将详细解释这些问题和概念或建议我阅读一本书，我将非常感激。如果某些3D图表可用于第一个问题，则效果最佳。 真的很感激。
答案 0 :(得分：1)
3D场景渲染在画布容器中。它可以是任何大小，位于HTML页面布局的任何位置。通常，WebGL示例和应用程序都是全屏制作的，因此画布填充整个屏幕，并且实际上与HTML布局的大小相同。但情况并非总是如此，WebGL场景可以与其他HTML内容一起嵌入，就像图像一样。
Three.js通常不关心或知道3D画布如何与整个HTML页面的坐标和大小相关。在WebGL画布内部，使用完全不同的坐标系 - 完全独立于屏幕像素。
当您想要处理3D画布内的点击时，遗憾的是浏览器仅提供从HTML页面左上角开始计算的像素值（eltx和elty）。因此，您需要首先将HTML鼠标坐标转换为WebGL坐标（可在Three.js中使用的向量）。在WebGL坐标中，0,0是画布的中心，-1，-1是左上角，+ 1，+ 1右下角，依此类推，无论画布的大小和位置如何。
首先，您需要获取画布的位置并从鼠标坐标中减去该位置。您的公式不考虑这一点，而是假设webgl容器位于页面的左上角（画布位置为0px 0px）。没问题，但是如果您移动容器或者HTML主体具有CSS填充，则它将不再准确。
其次，您需要转换绝对鼠标像素位置（在上一步中调整），并将其转换为画布内的相对位置。这就是你的配方所做的。如果鼠标x位置为50px且画布宽度为100px，则公式如（50/100）* 2 - 1 = 0，这是画布视口的屏幕空间中心。
现在你有了在Three.js 3D场景中有意义的坐标。