¿Cómo implementar mouselook en el navegador?

10

Actualmente estoy creando un juego de disparos en 3D en primera persona en el navegador usando WebGL. ¿Cómo implementaría mouselook / free look para tal juego?

3d javascript webgl first-person-shooter browser-based-games Jephir
fuente
Mire la implementación de THREE.js de la clase FirstPersonControls . Es posible que también deba bloquear el puntero para mirar libremente alrededor del reproductor. Pruebe esto: Bloqueo de puntero . Desafortunadamente, no está implementado en Opera e IE, pero WebGL tampoco está implementado en esos navegadores.
Szymon Wygnański

Respuestas:

10

Mouselook ahora es compatible con Chrome y Firefox a través de la especificación W3C Pointer Lock . Esencialmente:

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;

Un buen artículo de tutorial es Pointer Lock y First Person Shooter Controls en HTML5Rocks.

Vincent Scheib
fuente
El error debe repararse , porque esta demostración funciona en Firefox ahora: mdn.github.io/pointer-lock-demo Si actualiza su comentario, le daré un 'up'
xaxxon
1

Capture mousemoveeventos y use las propiedades screenXy screenYdel objeto de evento para actualizar la posición de la cámara (use el delta hasta el último screenXy la screenYposición para obtener la cantidad de movimiento).

Si tiene algún tipo de escena , podría construir una configuración de nodo como la siguiente:

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

El movimiento en el eje X gira el YawNode y el movimiento en el eje Y gira el PitchNode. El CameraNode se moverá cuando el jugador se mueva.

bummzack
fuente
1

Es bastante simple, y solo toma dos cosas.

  1. Un controlador de eventos para el evento de movimiento del mouse.
  2. Un objeto de cámara que representa tu transformación básica de vista de modelo

Código de evento de muestra

Aquí hay un código fuente de muestra para hacer el manejo del evento. El módulo del sistema (que maneja toda la interacción del navegador del juego <-->) realiza un seguimiento de dos variables: lastMousePositiony lastMouseDelta.

Para rastrear la cámara con el mouse, solo necesita lastMouseDeltasaber cómo sabrá cuántos grados rotar cuadro por cuadro.

  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];
  };

Mismo código de movimiento de cámara

Aquí hay un código de muestra para manejar la rotación de la cámara. Dada la cantidad de píxeles que el mouse se ha movido en la dirección X o Y, gire la cámara tantos grados.

 /**
   * 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]);
  }

Más tarde, cuando realmente renderice su mundo, simplemente genere una matriz de vista de modelo desde su cámara. (Convirtiendo la posición, guiñada, inclinación y balanceo de la cámara en vectores que puede pasar a gluLookAt.) Y debería estar listo para comenzar.

Chris Smith
fuente