Як реалізувати миші в браузері?

10

Зараз я створюю 3D-шутер від першої особи в браузері за допомогою WebGL. Як я можу реалізувати мишопогляд / вільний вигляд такої гри?

— Джефір
джерело

Подивіться на реалізацію three.js - их FirstPersonControls класу. Вам також може знадобитися заблокувати покажчик, щоб вільно озирнутися навколо програвача. Спробуйте це: Блокування вказівника . На жаль, він не реалізований в Opera та IE, але WebGL також не реалізується в цих браузерах.

— Szymon Wygnański

10

Mouselook тепер підтримується в Chrome і Firefox через специфікацію блокування вказівника W3C . По суті:

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-Вісі обертає вузол YawNode, а рух у Y-вісі обертає PitchNode. Вузол CameraNode буде переміщений, коли плеєр рухається.

— джмель
джерело

1

Це досить просто і просто займає дві речі.

Обробник події для події переміщення миші.
Об'єкт камери, що представляє вашу основну трансформацію перегляду моделі

Зразок коду події

Ось приклад вихідного коду для обробки події. Системний модуль (який обробляє всю ігрову <--> взаємодію браузера) відслідковує дві змінні: 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.) І вам слід добре піти.

— Кріс Сміт
джерело