Question

我一直致力于在 p5.js 中为游戏和随机项目制作 3D 第一人称相机，但遇到了一些麻烦。

一段时间以来，我一直在我的项目中使用单个 y 旋转矩阵来让玩家环顾四周，但我最近想升级，所以我决定使用 x 和 y 旋转矩阵对于我的相机代码。我能够通过将两个计算出的 z 值相除来拼凑一个可以工作的系统，但是存在一些问题，更不用说这不是旋转矩阵的工作方式。我最近尝试进行适当的实施，但遇到了一些问题。

我一直在使用这个：camera(0, 0, 0, -200*sin(rot.y), -200*sin(rot.x), (200*cos(rot.x)) + (200*cos(rot.y)), 0, 1, 0); 作为我的测试相机代码，理论上可以工作，但在实际设置中，由于某些原因，它不起作用，正如您所看到的 here .现在，如果您环顾四周太远，它会随机散开并弄乱您的视线。

我还可以确认我使用的是正确的公式 here。我使用（几乎）完全相同的代码来计算值，看起来完全没问题。

使用 p5.js 相机有什么奇怪的技巧吗？或者这是一些需要修复的错误吗？

Answer 1

您实际上没有正确的公式。您展示的示例使用 orbitControl()，而不是 camera。它也没有旋转通过的两个不同的角度。

camera() 中间的 3 个坐标定义了相机指向的点。这意味着您希望该点的移动方式与您希望相机焦点移动的方式相同。像这样（在您的原件中）在那个点画一个框可能会有所帮助：

push();
translate(-200*sin(rot.y), -200*sin(rot.x), (200*cos(rot.x)) + (200*cos(rot.y)));
box(50);
pop();

您会注意到盒子与相机的距离并不总是相同。它停留在一个大半径和小半径都是 200 的圆环上。你想要的是一个半径为 200 的球体（实际上它可以有任何半径）。

定义这三个坐标的方式取决于您希望用户的交互方式。这是一种方法：

camera(0, 0, 0,
       cos(rot.x) * cos(rot.y),
       cos(rot.x) * sin(rot.y),
       sin(rot.x),
       0, 0, 1);

这会根据纬度和经度指向相机，北极位于 Z 轴正方向。鼠标左右移动影响经度，上下影响纬度。

P5.js 相机不适用于多个旋转矩阵

1 个答案: