javascript - 网络套件 3D CSS。像第一人称射击游戏一样旋转相机

Question

我想要实现的是像 http://www.keithclark.co.uk/labs/3dcss/demo/ 这样的相机旋转.它并不完美，有时相机会损坏，但这就是想法。

我喜欢像人类视角一样的旋转，但我只设法获得了某个点的旋转。这是我获得的一个例子 http://jsfiddle.net/gaAXk/3/ .

正如我之前所说，我想要一个像人类一样的行为。

我也试过 -webkit-transform-origin 但没有更好的结果。

我们将不胜感激任何帮助/建议。

Answer 1

这里的问题如下:

为了提供类似人类的行为，当视点移动时，您应该计算对象在 x/y/z 轴上的新位置(不只是旋转 Angular ，以防万一例如，旋转)。

CSS 变换应该按以下方式工作，我们给一个场景一个视角，例如 800 像素。然后对象将是可见的Z 位置最多为 800px，如果 Z 位置是，例如 1000px，它将在我们的视角后面，所以我们将无法看到元素。

也就是说，在旋转之后，您应该根据我们的新观点计算元素的新位置。

为了更清楚我用更简单的代码更新了你的例子(它只支持旋转并且只有一张图片):http://jsfiddle.net/gaAXk/12/

• 示例中的视角是800px。
• 图像最初放置在x=0px, y=0px, z=0px。因此它会在我们面前以 800 像素的“距离”可见。
• 当我们旋转视点时，元素应该围绕视点沿圆周移动，因此 x、z 位置和旋转 Angular 元素，需要更新。

示例中的元素沿着半径为 800 像素的圆周移动(calculatePos() 函数可以实现)。

如果我们改变位置(如果视点离某些物体更近，而离其他物体更远)，则应更新相同的计算。

这不是那么微不足道。如果有人有更好的解决方案(我不是 3D 专家)，我会很高兴听到一些。