Element : méthode requestPointerLock()

Syntaxe

requestPointerLock()
requestPointerLock(options)

Paramètres

options Facultatif

Un objet d'options qui peut contenir les propriétés suivantes :

unadjustedMovement Facultatif

Désactive l'ajustement au niveau du système d'exploitation pour l'accélération de la souris et permet d'accéder aux données brutes de la souris. La valeur par défaut est false ; la définir sur true désactive l'accélération de la souris.

Valeur de retour

Une promesse (Promise) qui se résout avec undefined.

Sécurité

Une activation transitoire est requise lors de l'appel de requestPointerLock(). L'utilisateur·ice doit interagir avec la page ou un élément de l'interface utilisateur pour que cette fonctionnalité fonctionne. De plus, le document associé à l'élément cible doit être dans l'état actif.

Si vous appelez requestPointerLock() immédiatement après avoir libéré le verrouillage du pointeur avec le geste de déverrouillage par défaut (au lieu de passer par un appel à exitPointerLock()), l'appel échoue, même si une activation transitoire est disponible.

Si vous appelez requestPointerLock() avec requestFullscreen(), le requestPointerLock() doit être appelé en premier, car le requestFullscreen() consomme l'état de l'activation transitoire.

Le jeton de bac à sable allow-pointer-lock doit être ajouté lors de l'appel de requestPointerLock() dans un élément HTML <iframe>. De plus, aucun autre élément dans d'autres éléments HTML <iframe> ne peut être en mode verrouillage du pointeur.

Exemples

Le verrouillage du pointeur est souvent utilisé dans les jeux en ligne, lorsque vous souhaitez que les mouvements de votre souris se concentrent sur le contrôle du jeu, sans être distrait par le pointeur de la souris se déplaçant, sortant de la zone de jeu ou atteignant le bord de la fenêtre.

Pour activer le verrouillage du pointeur, vous devez amener l'utilisateur·ice à interagir avec l'interface utilisateur d'une manière ou d'une autre, peut-être en appuyant sur un bouton, ou sur le canevas du jeu lui-même.

canvas.addEventListener("click", async () => {
  await canvas.requestPointerLock();
});

Les systèmes d'exploitation activent par défaut l'accélération de la souris, ce qui est utile lorsque vous souhaitez parfois des mouvements lents et précis (par exemple lorsque vous utilisez un logiciel de graphisme), mais que vous souhaitez également parcourir de grandes distances avec un mouvement de souris plus rapide (par exemple pour faire défiler et sélectionner plusieurs fichiers). Cependant, pour certains jeux en perspective à la première personne, les données brutes de la souris sont préférées pour contrôler la rotation de la caméra — où le même mouvement de distance, rapide ou lent, entraîne la même rotation. Cela se traduit par une meilleure expérience de jeu et une plus grande précision, selon les joueur·euse·s professionnel·le·s.

Pour désactiver l'accélération de la souris au niveau du système d'exploitation et accéder aux données brutes de la souris, vous pouvez définir unadjustedMovement sur true :

canvas.addEventListener("click", async () => {
  await canvas.requestPointerLock({
    unadjustedMovement: true,
  });
});

Pour plus d'exemples de code, voir :

• la démonstration de verrouillage du pointeur ^(angl.) (voir le code source ^(angl.))
• L'API Pointer Lock
• Désactiver l'accélération de la souris pour une meilleure expérience de jeu FPS ^(angl.)

Spécifications

Compatibilité des navigateurs

Voir aussi

• La propriété Document.pointerLockElement
• La méthode Document.exitPointerLock()
• L'API Pointer Lock