FPSの視点移動はなぜカーソルが画面端までいって止まることがないのですか？

Three.js でマウスによるカメラの視点移動を作りたいのですが、
マウスが画面端まで行くとマウスが画面端に引っ掛かり、視点移動が止まってしまいます。
なぜFPSゲームなどの視点移動は画面端までカーソルが動くことによってそれ以上視点が動かせなくならないのですか？
マウスの視点移動で画面端でマウスが引っかからないようにするにはどうすれば良いですか？
また画面外でもマウスの座標を取得できたりしませんか？
回答よろしくお願いします！
以下のコードを.htmlで保存し実行しています。

HTML
<html>
    <body style="margin:0">
        <canvas id ="test">
        </canvas>
        <canvas id = "UI" style="position:fixed; top:0px; left:0px; width:100%; height:100%; background-color:rgba(0,0,0,0);">
        </canvas>

        <!--Three.jsファイルロード-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r127/three.min.js">
        </script>

        <script>

            var width = window.innerWidth
            var height = window.innerHeight
            var canvas = document.getElementById("UI")
            var context = canvas.getContext("2d")

            canvas.width = height
            canvas.height = width

            //画面のリサイズに応じてレンダラーのサイズを調節する
            window.addEventListener("resize",function(event){
                width = window.innerWidth//タブ領域を含まないウィンドウサイズ
                height = window.innerHeight//
                renderer.setSize(width,height)
            })

            var renderer=new THREE.WebGLRenderer({
                canvas: document.querySelector("#test")
            })
            renderer.setSize(width,height)

            var scene=new THREE.Scene()

            var camera=new THREE.PerspectiveCamera(45,width/height)//視野角,アスペクト比
            camera.position.set(0,0,0)



            const box0 = new THREE.Mesh(//青色の箱
                new THREE.BoxGeometry(1,1,1),//箱の大きさ
                new THREE.MeshBasicMaterial({color:"blue"})
            )
            box0.position.set(3,0,0)
            scene.add(box0)

            var box1=new THREE.Mesh(//赤色の箱
                new THREE.BoxGeometry(1,1,1),//箱の大きさ
                new THREE.MeshBasicMaterial({color:"red"})
            )
            box1.position.set(-3,0,0)
            scene.add(box1)

            var box2=new THREE.Mesh(//オレンジの箱
                new THREE.BoxGeometry(1,1,1),//箱の大きさ
                new THREE.MeshBasicMaterial({color:"orange"})
            )
            box2.position.set(0,0,3)
            scene.add(box2)

            var box3=new THREE.Mesh(//緑の箱
                new THREE.BoxGeometry(1,1,1),//箱の大きさ
                new THREE.MeshBasicMaterial({color:"green"})
            )
            box3.position.set(0,0,-3)
            scene.add(box3)

            //ここから下は自分の書いたコードではないです
            var MouseSensitivity = 0.006
            var _euler = new THREE.Euler( 0, 0, 0, 'YXZ' );//オイラー角?
            document.addEventListener("mousemove",function(event){
                const movementX = event.movementX || 0;//マウス移動量X の取得 || はどちらかが True
                // || 0　はたぶんマウスが動かなくなったら movementX = 0になる
                // ↑↑マウスが動かないときでも 0 じゃなかったら 次にマウスを動かした際 視点の変化量が前の値になったままなので 急に動いておかしくなる
                    const movementY = event.movementY || 0;//マウス移動量Y の取得

                    _euler.setFromQuaternion( camera.quaternion );//オイラー角に camera の quaternion適応 たぶん..

                    _euler.y -= movementX * MouseSensitivity;//マウスの移動量に応じて 視点の変化量を決める
                    _euler.x -= movementY * MouseSensitivity;//

                    _euler.x = Math.max( Math.PI/2 - Math.PI, Math.min( Math.PI/2 - 0, _euler.x ) );
                    camera.quaternion.setFromEuler( _euler );//cameraのquaternionにオイラー角適応たぶん

                //↑↑----------------------------------------------------------------------------
            })
            //ここから上は自分で書いたコードではないです

            function animation(){
                renderer.render(scene,camera)//レンダリング
                requestAnimationFrame(animation)//ブラウザの更新毎で実行する
            }
            animation()
        </script>
    </body>

</html>