Element: requestPointerLock()-Methode

options Optional

Ein Optionsobjekt, das die folgenden Eigenschaften enthalten kann:

unadjustedMovement Optional

Deaktiviert die Betriebssystem-basierte Anpassung für Mausbeschleunigung und greift stattdessen auf rohe Mauseingaben zu. Der Standardwert ist false; das Setzen auf true deaktiviert die Mausbeschleunigung.

Ein Promise, das mit undefined aufgelöst wird.

Eine transiente Aktivierung ist erforderlich, wenn requestPointerLock() aufgerufen wird. Der Benutzer muss mit der Seite oder einem UI-Element interagieren, damit diese Funktion funktioniert. Auch muss das zugehörige Dokument des Zielobjekts im aktiven Zustand sein.

Wenn requestPointerLock() unmittelbar nach dem Freigeben der Zeiger-Sperre durch die Standard-Entsperr-Geste (anstatt durch einen exitPointerLock()-Aufruf) aufgerufen wird, wird der Aufruf fehlschlagen, auch wenn eine transiente Aktivierung verfügbar ist.

Wenn requestPointerLock() zusammen mit requestFullscreen() aufgerufen wird, muss requestPointerLock() zuerst aufgerufen werden, da die requestFullscreen() den Zustand der transienten Aktivierung verbrauchen wird.

Das allow-pointer-lock Sandbox-Token muss hinzugefügt werden, wenn requestPointerLock() in einem <iframe>-Element aufgerufen wird. Auch dürfen keine anderen Elemente in anderen <iframe>-Elementen im Zeiger-Sperrzustand sein.

Die Zeiger-Sperre wird häufig in Online-Spielen verwendet, wenn Sie möchten, dass Ihre Mausbewegungen sich auf die Steuerung des Spiels konzentrieren, ohne dass der Mauszeiger sich bewegt, aus dem Spielbereich herausgeht oder den Rand des Fensters erreicht.

Um die Zeiger-Sperre zu aktivieren, würden Sie den Benutzer dazu bringen, mit der Benutzeroberfläche auf irgendeine Weise zu interagieren, vielleicht durch Drücken eines Buttons oder auf die Spielfläche selbst zu klicken.

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

Betriebssysteme aktivieren standardmäßig Mausbeschleunigung, was nützlich ist, wenn Sie manchmal langsame präzise Bewegungen wünschen (denken Sie daran, wie Sie vielleicht ein Grafikprogramm verwenden), aber auch große Distanzen mit einer schnelleren Mausbewegung zurücklegen wollen (denken Sie an das Scrollen und Auswählen mehrerer Dateien). Für einige Spiele aus der Ich-Perspektive wird jedoch auf rohe Mauseingabedaten zur Steuerung der Kameradrehung zurückgegriffen — wo die gleiche Bewegung, ob schnell oder langsam, die gleiche Rotation ergibt. Dies führt laut professionellen Spielern zu einem besseren Spielerlebnis und einer höheren Genauigkeit.

Um die Betriebssystem-basierte Mausbeschleunigung zu deaktivieren und auf rohe Mauseingaben zuzugreifen, können Sie das unadjustedMovement auf true setzen:

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

Für mehr Beispielcode siehe:

• Zeiger-Sperr-Demo (siehe Quellcode)
• Pointer Lock API
• Mausbeschleunigung deaktivieren, um ein besseres FPS-Spielerlebnis zu ermöglichen

• Document.pointerLockElement
• Document.exitPointerLock()
• Pointer Lock