2

私は webGL で遊んでいて、非常に哀れなグラフィックスで小さな 3 次元ゲームを作成できるようになりました (現時点では、概念/機能の証明にすぎません)。3 次元体験では、マウスを任意の方向に無限かつシームレスに動かして、一人称カメラを回転させると便利です。Pointerlock を使用すると、カーソル位置をロックして非表示にすることができます。これは非常に便利ですが、マウスの動きを追跡する別の方法を見つける必要があります。私の研究では、 が標準のようevent.movementXにevent.movementY見えましたが、マウスの動きと反対方向に大きなブリップ (通常は 500 から 583 の間) が頻繁に発生します。これを多数のマウスとトラックパッドでテストしたところ、同じ現象が発生しました。

これが私の関連するイベントリスナーです：

document.addEventListener("mousemove", function(event) {
   xMovement += event.movementX; 
   yMovement += event.movementY; 
   console.log(event.movementX)
}, false);

document.addEventListener("pointerlockchange", function(event) {
   if(pointerLockEnabled) pointerLockEnabled = false; 
   else pointerLockEnabled = true; 
   xMovement = 0; yMovement = 0; 
} , false);

関連するレンダリング ループ コード:

function render() {
   if(pointerLockEnabled) {
       camera.rotation.y = -xMovement / 1000;
       camera.rotation.x = -yMovement / 1000;
       if(rightKey && !leftKey) {
          camera.position.x += 10 * Math.cos(camera.rotation.y);
          camera.position.z -= 10 * Math.sin(camera.rotation.y);
       }
       else if(leftKey && !rightKey) {
          camera.position.x -= 10 * Math.cos(camera.rotation.y);
          camera.position.z += 10 * Math.sin(camera.rotation.y);
       }
       if(upKey&& !downKey) {
          camera.position.z -= 10 * Math.cos(camera.rotation.y);
          camera.position.x -= 10 * Math.sin(camera.rotation.y);
       }
       else if(downKey && !upKey) {
          camera.position.z += 10 * Math.cos(camera.rotation.y);
          camera.position.x += 10 * Math.sin(camera.rotation.y);
       }
   }
}

しかし、私のコンソールには次のような出来事があります：

コンソールキャプチャ

カメラアングルが大きく回転しないように変更に条件をつけましxMovementたが、やはり動きがイマイチです。よりシームレスなインターフェイスの動きにパッチを当てるか、置き換えるアイデアはありますか?

4

3 に答える 3

1

何らかの方法で mousemove イベントを抑制していただけると助かります。たとえば、lodash スロットルバージョン:

function handleMouseMove(event) {
   xMovement += event.movementX; 
   yMovement += event.movementY; 
   console.log(event.movementX)
}
var throttledHandleMouseMove = _.throttle(handleMouseMove, 75);
document.addEventListener("mousemove", throttledHandleMouseMove, false);

このアプローチhandleMouseMoveでは、75ms あたり 1 回以上実行されることはありません。

于 2018-01-10T03:48:52.343 に答える