PlayCanvasのFPVでpointerLockを制御する（暫定）

備忘録

FPVでここは一旦ポインタロックされたくないなって時は、first-person-view.jsのmouseDown()に以下のような条件を追加してやる。

var mouseDown = function (e) {
        if (document.pointerLockElement !== canvas && canvas.requestPointerLock) {
            if(container.classList.contains("is-open")){
                return;
            }
            canvas.requestPointerLock();
        }
    };

2つ目のif文でis-openというclassが付与されているかどうかをチェックし、付いているタグがあればポインタロックせず、関数を抜ける。
classにis-openが付与されていなければ、ポインタロックする。

どういう時に使いたかったと言うと、FPVで歩き回っている時に、イベントを発生させてHTMLを表示した際、そのHTMLを閉じるときに閉じるボタンを設置したが、どうしても先にポインタロックがかかってしまい、閉じるボタンが押せずイライラした。

別の方法として、document.getElementById()を使う方法なども試したが、表示させるものがHTMLだった場合など、仕様によってはあらかじめ表示させるHTMLをプリロードしている場合があり、この場合、画面には見えていないが、検索したidやclassはすでにdocument上にあると言う判断がされてしまうようで、ポインタロックがかからなくなってしまった。
classListを使うことで解除できることがわかった。

You know what I mean?

もう少し研究して、もっと良い方法がわかったらこの記事を改修しますが、暫定的に公開しておきます。