Webkit的3D CSS。在第一人称射击游戏旋转摄像头象 [英] Webkit 3D CSS. Rotate camera like in a First Person Shooter

问题描述

我想实现的是类似 http://www.keithclark.co.uk/一个摄像头转动实验室/ 3dcss /演示/ 。它并不完美，有时相机休息，但是这是这个想法。

What I want to achieve is a camera rotation like http://www.keithclark.co.uk/labs/3dcss/demo/ . It's not perfect and sometimes the camera breaks, but that's the idea.

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

I like the rotation to be similar like a human view, but I only managed to obtain a rotation across a certain point. This is an example of what I obtained http://jsfiddle.net/gaAXk/3/.

正如我以前说过，我想类似行为的人。

As i said before, i would like a human like behaviour.

我也试过用-webkit-变换出身，但没有较好的效果。

I also tried with -webkit-transform-origin but with no better result.

任何帮助/建议，将是非常美联社preciated。

Any help/suggestion will be highly appreciated.

推荐答案

这里的问题是：

要给出一个类似人类的行为，时的动作来看的时候，你应该计算该物体在X / Y / Z轴新位置（不仅仅是旋转的情况下角旋转，例如）的。

To give a human-like behavior, when the point of view moves, you should calculate the new positions on the x/y/z axis for the objects (not just the rotation angle in case of a rotation, for instance).

CSS变换应该在follwing方式，我们给出了一个透视，例如800px到现场。然后对象将是可见的与Z位置达800px ，如果Z位置，例如1000px，这将是背后我们的观点，因此，我们将无法看到元素。

CSS transform should work in the follwing way, we give a perspective, for example of 800px to a scene. Then the objects will be visible with a Z position up to 800px, if the Z position is, for example 1000px, it will be behind our point of view, so we won't be able to see the element.

这是说，一个旋转之后，你应该计算基于我们的新观点的各项的新位置。

That said, after a rotation you should calculate the new position for the items based on our new point of view.

要更清晰的我已经更新了你的例子有更简单的code （只支持旋转和那里只是一个图像）的http://jsfiddle.net/gaAXk/12/

To be clearer I've updated your example with much simpler code (it only supports rotation and there's just one image): http://jsfiddle.net/gaAXk/12/

• 的透视的的例子的 800px 的
• 在图像最初放在 X = 0px，Y = 0px，Z = 0px 的。因此，这将是摆在我们面前可见的800px距离。
• 当我们看的旋转的角度，应将元素的沿着围绕来看圆周移动的，所以X，Z立场和的旋转角度元件，需要更新。

• The perspective in the example is 800px.
• The image is initially placed at x=0px, y=0px, z=0px. So it will be visible in front of us at a "distance" of 800px.
• When we rotate the point of view, the element should move along a circumference around the point of view, so the x,z positions and the rotation angle of the element, needs to be updated.

本例中的元素沿圆周运动与800px半径（中的 calculatePos（）的功能的伎俩）。

The element in the example moves along a circumference with 800px radius (the calculatePos() function does the trick).

如果我们改变位置（如果上看变得更接近一些对象，并进一步从其他）。相同的计算应更新

The same calculation should be updated if we change position (if the point of view gets closer to some objects, and further from others).

这是不那么简单。如果任何人有更好的解决方案（我不是3D专家），我会很高兴地听到一些。

This isn't so trivial. If anyone has better solutions (I'm not a 3D expert), I will be glad to hear some.

这篇关于Webkit的3D CSS。在第一人称射击游戏旋转摄像头象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！