VRエンジン作成日記

ひたすらVRエンジンを作っていきます

UIパーツを修正

UIパーツをいくつか修正した。Vector3の値を入力する時に、X、Y、Zのラベルをドラッグして数値を変える処理を入れているんだけど、その動きをPointer Lock APIを使って入力しやすくしたりしていた。

developer.mozilla.org

聞き馴染みのないAPIだけど、3DのゲームでFPSの銃の照準を合わせたりする時に使われるAPIらしい。どういうことかというと、普通にJavaScriptのmousemoveイベントで実装すると、マウスポインタが画面端に到達してしまって、それ以上回転ができなかったりする。途中までは回転したんだけど、それ以上向こう側に回転できない。。という状況が発生してしまう。Pointer Lock APIでは、いったんマウスポインタを画面から消失させることで、画面端にマウスポインタが到達するという出来事自体を発生しなくすることができる。ただ、ロック解除しないとalt + tab等でアプリを切り替えるまで、マウスポインタが行方不明になってしまう。サンプルではcanvasタグで使用する例がよくでてくるみたいだけど、divタグでも使うことができた。HTMLElementインターフェイス自体に実装されているようだ。ただ、今のところElectronでしか動作確認していないので、Firefox等ではcanvasでしか動かないのかもしれない。

他にはカラーピッカーをHTMLのinput type="color"で実装した。ただ、このHTML標準のカラーピッカーは曲者で、出現する位置の指定ができないのと、JavaScriptから閉じる操作ができないという難点がある。さらには、Electronだとアプリをリロードしても以前のカラーピッカーが残ってしまい、画面に残ってしまったカラーピッカーを操作するとElectronがクラッシュするという問題がある (ver3)。このままではどうにも不便なので、後ほどカラーピッカーのUIは自作した方が良さそうだ。

・関連するコミット

fix input number ui · hikipuro/tea.js@321e057 · GitHub