Как реализовать мышиный взгляд в браузере?

10

В настоящее время я создаю 3D-шутер от первого лица в браузере с использованием WebGL. Как мне реализовать mouselook / free look для такой игры?

3d javascript webgl first-person-shooter browser-based-games Jephir
источник
Посмотрите на реализацию THREE.js класса FirstPersonControls . Вам также может понадобиться заблокировать указатель, чтобы свободно осмотреть игрока. Попробуйте это: блокировка указателя . К сожалению, он не реализован в Opera и IE, но WebGL также не реализован в этих браузерах.
Szymon Wygnański

Ответы:

10

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.

Винсент Шейб
источник
Ошибка должна быть исправлена, потому что это демо теперь работает в Firefox: mdn.github.io/pointer-lock-demo Если вы обновите свой комментарий, я дам вам «вверх»
xaxxon
1

Захват mousemoveсобытий и использование screenXи screenYсвойства объекта события для обновления положения камеры (используйте дельту до последнего screenXи screenYположение, чтобы получить величину движения).

Если у вас есть какой-то вид графа сцены , вы можете создать настройку узла следующим образом:

CameraNode (Scene Node)
 |
 +- YawNode (Scene Node)
     |
     +- PitchNode (Scene Node)
         |
         +- Camera (actual Camera Object)

Движение по оси X вращает узел Yaw, а движение по оси Y вращает узел Pitch. CameraNode будет перемещаться при перемещении игрока.

bummzack
источник
1

Это довольно просто и просто занимает две вещи.

  1. Обработчик события для перемещения мыши.
  2. Объект камеры, представляющий ваше базовое преобразование вида модели

Пример кода события

Вот пример исходного кода для обработки событий. Системный модуль (который обрабатывает все игровые <-> взаимодействия с браузером) отслеживает две переменные: 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.) И вам следует идти вперед.

Крис Смит
источник