Webkit 3D CSS. Поверните камеру, как в шутере от первого лица

Я хочу добиться вращения камеры, например http://www.keithclark.co.uk/labs/3dcss/demo/. Это не идеально, и иногда камера ломается, но эта идея.

Мне нравится поворот, похожий на человеческий взгляд, но мне удалось получить вращение по определенной точке. Это пример того, что я получил http://jsfiddle.net/gaAXk/3/.

Как я уже говорил, я хотел бы, чтобы поведение человека было похоже.

Я также пробовал с -webkit-transform-origin, но без лучшего результата.

Любая помощь/предложение будут высоко оценены.

Ответ 1

Проблема заключается в следующем:

Чтобы дать поведение человека, , когда точка зрения перемещается, вы должны рассчитать новые позиции по оси x/y/z для объектов (а не только угол поворота в случае например, вращения).

Преобразование CSS должно работать следующим образом: мы даем перспектива, например, 800px для сцены. Тогда объекты будут видны с позицией Z до 800px, если позиция Z, например 1000px, будет за нашей точкой зрения, поэтому мы не сможем увидеть элемент.

Тем не менее, после ротации вы должны рассчитать новую позицию для предметов на основе нашей новой точки зрения.

Чтобы быть яснее , я обновил ваш пример гораздо более простым кодом (он поддерживает только поворот и есть только одно изображение): http://jsfiddle.net/gaAXk/12/

Перспектива в примере - 800px.
Изображение первоначально помещается в x = 0px, y = 0px, z = 0px. Таким образом, это будет видно перед нами на "расстоянии" 800 пикселей.
Когда мы поворачиваем точку зрения, элемент должен перемещаться по окружности вокруг точки зрения, поэтому необходимо обновить положения x, z и угол поворота элемента.

Элемент в примере перемещается по окружности с радиусом 800px (функция calculatePos() выполняет трюк).

Тот же расчет должен быть обновлен, если мы изменим позицию (если точка зрения приближается к некоторым объектам и далее от других).

Это не так тривиально. Если у кого-то есть лучшие решения (я не 3D-эксперт), я буду рад услышать некоторые из них.