В настоящее время я создаю 3D-шутер от первого лица в браузере с использованием WebGL. Как мне реализовать mouselook / free look для такой игры?
В настоящее время я создаю 3D-шутер от первого лица в браузере с использованием WebGL. Как мне реализовать mouselook / free look для такой игры?
Ответы:
Mouselook теперь поддерживается в Chrome и Firefox через спецификацию W3C Pointer Lock . По существу:
document.onmousemove = function (e) {
document.body.innerHTML = "<div>dx: " +
(e.movementX || e.mozMovementX || e.webkitMovementX || 0);
}
document.body.onclick = document.body.requestPointerLock ||
document.body.mozRequestPointerLock ||
document.body.webkitRequestPointerLock;
Хорошая учебная статья - « Блокировка указателя и элементы управления шутером от первого лица» на HTML5Rocks.
Захват mousemove
событий и использование screenX
и screenY
свойства объекта события для обновления положения камеры (используйте дельту до последнего screenX
и screenY
положение, чтобы получить величину движения).
Если у вас есть какой-то вид графа сцены , вы можете создать настройку узла следующим образом:
CameraNode (Scene Node)
|
+- YawNode (Scene Node)
|
+- PitchNode (Scene Node)
|
+- Camera (actual Camera Object)
Движение по оси X вращает узел Yaw, а движение по оси Y вращает узел Pitch. CameraNode будет перемещаться при перемещении игрока.
Это довольно просто и просто занимает две вещи.
Вот пример исходного кода для обработки событий. Системный модуль (который обрабатывает все игровые <-> взаимодействия с браузером) отслеживает две переменные: lastMousePosition
и lastMouseDelta
.
Чтобы отслеживать камеру с помощью мыши, вам просто нужно lastMouseDelta
знать, как вы узнаете, на сколько градусов повернуть кадр за кадром.
var canvas = /* WebGL rendering context */
canvas.onmousedown = function (event) { me.handleMouseDown(event); };
canvas.onmouseup = function (event) { me.handleMouseUp(event); };
canvas.onmousemove = function (event) { me.handleMouseMove(event); };
// snip
engine.SystemModule.prototype.handleMouseMove = function(event) {
this.lastMouseDelta = [event.clientX - this.lastMousePosition[0],
event.clientY - this.lastMousePosition[1]];
this.lastMousePosition = [event.clientX, event.clientY];
};
Вот пример кода для обработки вращения камеры. Учитывая количество пикселей, перемещенных мышью в направлении X или Y, поверните камеру на столько градусов.
/**
* degrees/pixel
* @const
*/
var cameraMouseRotation = 0.5;
// Mouse movement for camera angle.
if (sys.isMouseDown()) {
var positionChange = sys.getLastMousePositionDelta();
camera.rotateYDegs(cameraMouseRotation * positionChange[0]);
camera.rotateXDegs(-cameraMouseRotation * positionChange[1]);
}
Позже, когда вы начнете рендерить свой мир, просто сгенерируйте матрицу вида модели из вашей камеры. (Преобразование положения камеры, рыскания, тангажа и крена в векторы вы можете передать в gluLookAt.) И вам следует идти вперед.