Webkit 3D CSS.像第一人称射击游戏一样旋转相机 [英] Webkit 3D CSS. Rotate camera like in a First Person Shooter

查看:31
本文介绍了Webkit 3D CSS.像第一人称射击游戏一样旋转相机的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想要实现的是像 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-transform-origin 但没有更好的结果.

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

任何帮助/建议将不胜感激.

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 变换应该按以下方式工作,我们给一个透视图,例如 800 像素的场景.然后对象将是可见的Z 位置高达 800 像素,如果 Z 位置是,例如 1000 像素,它将在我们的视角后面,所以我们将无法看到元素.

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.

为了更清楚我用更简单的代码更新了你的例子(它只支持旋转,只有一张图片):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.所以它将在我们面前 800 像素的距离"处可见.
  • 当我们旋转视点时,元素应该沿着视点周围的圆周移动,所以 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.

示例中的元素沿半径为 800 像素的圆周移动(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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆