射线投影前的问题
学习与Three.js的互动时，我脑子里有几个问题
1)请解释什么是Viewport坐标？
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)在取矢量的同时，为什么在视口系统中取第三坐标为0.5 ~1？
如果你能详细解释这些问题和概念，或者建议我读一本书，我将非常感激。最好的情况是，一些3D图是可用的第一个问题。会真的很感激。
回答 1
Stack Overflow用户
发布于 2013-10-01 10:35:55
3D场景在画布容器中呈现。它可以是任意大小，并且位于HTML页面布局的任何位置。通常，WebGL示例和应用程序都是全屏制作的，这样画布就可以填充整个屏幕，并且实际上与HTML布局的大小相同。但情况并不总是如此，WebGL场景可以与其他HTML内容一起嵌入，就像图像一样。
Three.js通常不关心或不知道3D画布如何与整个HTML页面的坐标和大小相关。在WebGL画布中，使用了与屏幕像素无关的完全不同的坐标系统-totally。
当您想处理3D画布中的点击时，不幸的是，浏览器只给出从HTML页面左上角计数的像素值(eltx和elty)。因此，您需要首先将HTML老鼠坐标转换为WebGL坐标(一个在Three.js中可用的向量)。在WebGL坐标中，0,0是画布的中心，-1，-1是左上角，+1，+1，等等，不管画布的大小和位置如何。
首先，您需要获取画布的位置，并从鼠标坐标中减去它。您的公式没有考虑到这一点，而是假设webgl容器位于页面的左上角(画布位置为0px0px)。没关系，但是如果您移动了容器，或者HTML主体有CSS填充(例如，它将不再准确)。
其次，您需要转换绝对鼠标像素位置(在上一步中调整)，并将其转换为画布内的相对位置。你的公式就是这样的。如果鼠标x位置为50 of，而画布宽为100 of，则公式为(50/100) *2-1= 0，这是画布视图端口的屏幕空间中心。
现在，在Three.js 3D场景中，您有了有意义的坐标。
https://stackoverflow.com/questions/19091623
复制相似问题
腾讯云开发者
