Three.js中的头耦合/离轴透视

Question

我试图在不使用完整的headtrackr库的情况下实现永久的头部耦合透视。我的头不会移动，但它不会直接在屏幕前。

我有一点demo您可以使用python -m SimpleHTTPServer 8000

下载并运行

代码主要来自this headtrackr example和the headtrackr source

的一部分

我的期望基于此diagram：

在第三张图片中，我想象从上方逆时针旋转我的显示器。这相当于减少Z并使X小于零。我希望我的显示器显示中间图像，但我看到这样的事情：

我认为我正在浏览的“窗口”是XY平面，但它不应该像第一个图中的中间橙色矩形一样伸展吗？这是另一个保持固定的窗口：http://kode80.com/2012/04/09/holotoy-perspective-in-webgl/以查看“窗口”的含义。

离轴透视和头部跟踪是否无关？如何在THREE.js中获得令人信服的离轴透视幻觉？

Answer 1

我认为你可以用setViewOffset完成你的目标。你的图表看起来有点偏离我。也许是因为离轴投影中没有qube，但我认为要点是截锥体应该保持在固定点上，而不会旋转相机，导致透视失真。

要使用setViewOffset完成此操作，我会将fullWidth和fullHeight设置为一些特大号。视图偏移将是该超大视图中的窗口。当用户移动时，该窗口将在观察者的相反方向上偏移。

http://threejs.org/docs/#Reference/Cameras/PerspectiveCamera

Answer 2

3D投影映射可以分解为角钉固定纹理步骤和透视调整步骤。我认为他们有点不相关。

在Three.js中，您可以制作四边形曲面（由两个三角形Face3组成）并将纹理映射到曲面上。然后在XY（而不是Z）中移动四边形的角。我不认为这个步骤引入了透视伪像，而不是四边形纹理中的微小变形所必需的。我想我正在讨论条带问题和最近邻居工件，而不是3d透视错误。这些工件的大小取决于投影仪在物体上的照射方式。如果投影机与表面完全垂直，则需要进行非常小的角点映射。如果您使用的是显示器而不是投影仪，则无需转角固定。

接下来是透视调整步骤。您必须根据用户相对于现实生活曲面的位置来调整纹理的内容。我相信你可以用物理观察者到屏幕中心的XYZ距离，像素和实际尺寸之间的比例因子，以及表面的像素尺寸来做到这一点。

在我的演示中，我的立方体的蓝色面指向正Z方向。当我在现实世界中旋转我的显示器时，他们继续指向他们的显示器世界的正Z方向。我发布的图表有点误导，因为中间图片中的橙色框是局部旋转的，以补偿现实生活中的监视器世界的旋转。那个橙色盒子的正面不再完全指向其监视器世界的正Z方向。

在Three.js之外，在Processing中有一些投影映射技术。

这个可能是最简单的，虽然我自己没有尝试过：http://blogs.bl0rg.net/netzstaub/2008/08/24/wiimote-headtracking-in-processing/

SurfaceMapper for Processing支持实际曲面（不仅仅是扁平矩形），但它仅适用于Processing 2.0之前的Processing。

如果有人为Three.js开发了一个非常酷的SurfaceMapper库！我喜欢设计一个虚拟世界，在世界上放置相机，让每个相机都考虑真实的观察者视角，然后将这些渲染的纹理放在现实生活中。

Answer 3

您需要调整透视矩阵。它是用-left + right -bottom + top构建的。更改这些将产生您正在寻找的效果。