0

在学习与 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）为什么我们在取向量时取视口系统中的第三坐标为0.5比1？

如果您能详细解释这些问题和概念，或者建议我读一本书，我将不胜感激。最好有一些 3D 图表可用于第一个问题。真的很感激。

4

1 回答 1

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 位置为 50 像素且画布为 100 像素宽，则公式为 (50/100) * 2 - 1 = 0，即画布视口的屏幕空间中心。

现在您有了在 Three.js 3D 场景中有意义的坐标。

于 2013-10-01T10:35:55.207 回答