P5.js 相机无法使用多个旋转矩阵

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 相机无法使用多个旋转矩阵

P5.js camera not working with multiple rotation matrices

javascript

p5.js