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

Question

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

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

下载并运行

代码主要改编自this headtrackr example和 the headtrackr source 的一部分

我的期望是基于这个 diagram :

在第三张图片中，我想象从上方逆时针轻微旋转我的显示器。这应该等同于减少 Z 并使 X 小于零。我希望我的显示器显示中间的图像，但我看到的是这样的:

我认为我正在查看的“窗口”是 XY 平面，但它不应该像第一张图中中间的橙色矩形那样拉伸(stretch)吗？这是另一个保持固定的窗口:http://kode80.com/2012/04/09/holotoy-perspective-in-webgl/看看我所说的“窗口”是什么意思。

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

Answer 1

我认为您可以使用 setViewOffset 实现您的目标。我觉得你的图表有点不对劲。也许是因为在离轴投影中没有 qube，但我认为关键是平截头体应该保持在一个固定点上，而不是旋转相机，这会引入透视失真。

要使用 setViewOffset 完成此操作，我会将 fullWidth 和 fullHeight 设置为更大的尺寸。 View 偏移将是那个超大 View 中的一个窗口。当用户移动时，该窗口将向查看者的相反方向偏移。

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