Manejo del movimiento del mouse de cámara en Javascript (permitiendo el movimiento continuo del mouse)

Question

La idea es: Estoy creando un script WebGL simple (usando el maravilloso three.js de mrdoob) que permite al usuario controlar una cámara en un mundo de objetos. Se supone que la cámara simula las cámaras de disparos en primera persona tradicionales (por ejemplo, Team Fortress 2). Es decir, la cámara se mueve solo cuando el mouse se mueve.

Problema: en Javascript, la única manera de detectar el movimiento del mouse es si el cursor se mueve. En comparación, los juegos FPS no muestran el cursor: solo basan el movimiento de la cámara en cómo se mueve el mouse. Entonces, puedes mover el mouse por todo el mousepad en cualquier dirección y siempre funciona.

Sin embargo, en un navegador, dado que el movimiento de la cámara se basa en el cursor, no se puede mover, pero hasta ahora. Cuando el cursor toca el borde de la pantalla, el usuario no puede mirar más en esa dirección (por ejemplo, mueve el mouse hacia el borde izquierdo de la pantalla, ya no puede mirar hacia la izquierda).

La solución: He pensado en dos soluciones, pero ninguna de las cuales sé cómo implementar. O bien

1. Después de mover el mouse, el javascript lo restablece al centro de la pantalla. De esta forma, después de cada movimiento del mouse, el jugador puede moverse nuevamente en cualquier dirección. El problema con esto es que, en base a la investigación que he realizado, Javascript no puede controlar la posición del mouse del usuario (comprensiblemente, ya que sería una molestia incomparable en sitios malignos).

2. O, el mouse se "enrolla" alrededor de la pantalla. Es decir, cuando el usuario llega a un borde de la pantalla, el mouse simplemente continuará al otro lado de la pantalla. (Ver: http://www.digicowsoftware.com/detail?_app=Wraparound) Sin embargo, parece que esto tampoco es una capacidad inherente de javascript, sino que es algo que un programa de terceros podría resolver.

Entonces, ¿el problema tiene sentido? Si es así, ¿hay alguna manera de implementar las soluciones anteriores, o hay otra que me falta?

Answer 1

Para alguien que todavía está interesado en la consecución de este, ahora es algo disponible.

Usando:

document.addEventListener('pointerlockchange', changeCallback, false); 

ver ejemplo http://www.html5rocks.com/en/tutorials/pointerlock/intro/

Answer 2

Tienes razón en todo esto. La tecnología web basada en estándares no le dará la captura del mouse como desee.

Dicho esto: es posible que pueda crear (o encontrar) un archivo SWF especial que pueda recopilar datos de movimiento del mouse y pasarlos a javascript. No restringirá el movimiento del cursor, aunque puede usar CSS para ocultar el cursor mientras la captura del mouse está activa. Pero podría ser, por ejemplo, continúe disparando eventos "mover el mouse hacia la izquierda" incluso cuando el cursor haya alcanzado el borde izquierdo de la pantalla.

Cualquier SWF de este tipo probablemente no podrá capturar movimiento cuando el cursor esté fuera de la ventana gráfica, es decir, sobre el navegador chrome.

Answer 3

Dado que aparentemente no es posible hacerlo como tal en HTML5/Javascript, ¿qué pasa con esta variante: tratar el posición del mouse (no el movimiento del mouse) como representando la velocidad de giro.

De modo que si el mouse está a más de un cierto umbral del centro, la cámara gira hacia la izquierda; Cuanto más lejos esté el mouse, más rápido gira la cámara. Para detener el giro, el jugador mueve el mouse hacia el centro.

Para mí, esta interfaz de usuario es molesta, al menos inicialmente, pero tal vez el jugador se acostumbre a ella. Como no tenemos soluciones perfectas, puede valer la pena intentarlo. Puede mitigar el problema permitiendo que las teclas de flecha funcionen de la manera que lo hacen en muchos FPS, girando la cámara cuando se presionan hacia abajo.

Answer 4

La comunidad mundial está trabajando actualmente en un borrador de especificaciones para resolver este problema. Lo que estás diciendo se llama "bloqueo de mouse". He trabajado un poco en la primera fase de este estándar para ayudar a diseñar lo que se necesita. Vota por estos temas y suscríbete a las listas de correo indicadas para que todos podamos corregir este problema lo antes posible.

• cromo Bug: http://code.google.com/p/chromium/issues/detail?id=72754
• Firefox Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=633602 lista
• W3C Mail: http://www.w3.org/Bugs/Public/show_bug.cgi?id=9557
• Proyecto de propuesta: https://docs.google.com/document/d/1uV4uDVIe9-8XdVndW8nNGWBfqn9ieeop-5TRfScOG_o/edit?hl=es&authkey=CM-dw7QG

Sin embargo, todavía hay una forma en que puede lograr su objetivo (que es la otra forma que encontré): un plugin nativo que toma el control del mouse.

(estoy haciendo un juego demasiado que es un FPS, pero actualmente no se dará a conocer debido a esta limitación)