javascript - 在 javascript 中围绕对象运行 3d 相机

Question

谷歌搜索后我还没有找到这个问题的答案所以我要在这里试试。

我使用 (2d) canvas 在 javascript 中创建了一个 3d 世界，甚至还有一个 3d 相机，它可以很好地工作。但是，相机是“自由相机”，因此当您旋转时，相机会围绕自身旋转。

现在我想让相机围绕世界中的物体旋转，但我很难理解如何做到这一点。

我尝试了以下公式，但在我尝试旋转之前它就吓坏了......

this.x += (Math.sin(this.yd * (Math.PI / 180)) * distance);
this.z -= (Math.cos(this.yd * (Math.PI / 180)) * distance);

到目前为止更新多亏了下面 WojtekT 提供的答案，我得到了以下代码，它使相机围绕物体转动，但似乎也放大了……这可能只是我的眼睛在愚弄我，因为距离变量几乎没有变化(我认为有一个小的舍入问题，但除此之外它给出了预期的结果)

this.y = (Math.sin(this.yd * (Math.PI / 180)) * distance + this.targetY);
this.z = (Math.cos(this.yd * (Math.PI / 180)) * distance + this.targetZ);

this.yd 是以度为单位的运行速度。

我需要什么公式？

编辑:我不确定哪些代码可以帮助解决这个问题，所以这里是完整的源代码:

http://clanpvp.com/solhttp://clanpvp.com/js/sol/camera.js < Camera object, this probably.

出于调试原因，触发 keyup 事件时会加载一个新框架。同样为了调试，目标对象是一个固定点。在屏幕中央。

箭头键移动相机，wasd 键转动相机，到目前为止只有 W 和 S 做某事，由于上面的代码，他们做错了......

Answer 1

为了让这个公式起作用，你必须有一些变量来改变每一帧。例如变量 time:

time += this.yd;
this.x = (Math.sin(time * (Math.PI / 180)) * distance);
this.z = (Math.cos(time * (Math.PI / 180)) * distance);

否则 Math.sin 和 Math.cos 每帧返回相同的值。基本上，对于要旋转的东西，您需要提供随时间变化的 Angular 。在此示例中， Angular 是可变的 time。

编辑:我在我的回答中用 = 替换了 += 。此计算为您提供正确的 x 和 z 值，因此您无需进行任何递增。

编辑 2:

这个公式也缺少旋转中心。正确的计算应该是这样的:

this.x = (Math.sin(this.yd * (Math.PI / 180)) * distance + object_looked_at.x);
this.z = (Math.cos(this.yd * (Math.PI / 180)) * distance + object_looked_at.z);