Element: requestPointerLock() メソッド

options 省略可

以下のプロパティを含むことができるオプションオブジェクトです。

unadjustedMovement 省略可

OS レベルのマウス加速機能を無効にし、代わりに生のマウス入力にアクセスします。既定値は false で、true に設定すると加速機能が無効になります。

Promise で、undefined に解決します。

ポインターロックはオンラインゲームでよく使われます。マウスポインターが動き回ったり、ゲームエリアの外に出たり、ウィンドウの端に届いたりすることなく、マウスの動きをゲームの操作に集中させたい場合に使用します。

ポインターロックを有効にするには、ボタンを押すか、ゲームキャンバスそのものを押すなどして、ユーザーに何らかの方法で UI を操作してもらう必要があります。

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

オペレーティングシステムは既定で マウス加速機能を有効にしています。これは、ゆっくり正確な動きをしたいとき（グラフィックパッケージを使用する場合を考えてみてください）に便利ですが、より速いマウス操作で大きな距離を移動したいとき（スクロールや複数のファイルを選択する場合を考えてみてください）にも便利です。しかし、一人称視点のゲームでは、カメラの回転を制御するために生のマウス入力データが好まれます。プロゲーマーによれば、この方がより良いゲーム操作で高い精度が得られるとのことです。

OS レベルのマウス加速機能を無効にし、生のマウス入力にアクセスするには、unadjustedMovement を true に設定します。

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

それ以外の例のコードは次をご覧ください。

• pointer lock demo（ソースコードを見る）
• Pointer Lock API
• Disable mouse acceleration to provide a better FPS gaming experience

単発のユーザーによる有効化が必要です。この機能が動作するためには、ユーザーがページまたは UI 要素を操作する必要があります。

• Document.pointerLockElement
• Document.exitPointerLock()
• ポインターロック