three.js でタッチ系のイベントが発火しない時

環境

three.js - 113

困ったこと

clickに設定したイベントがマウスクリックでは問題ないのに、タッチで発火しないという事象に悩まされる。

こんな感じでイベントを設定↓

window.addEventListener('click', () => {
  // 発火せず
});

ちなみに、タッチ系もだめだった↓

window.addEventListener('touchstart', Callback);// 発火せず

原因

three.jsにサンプルとして付属している OrbitControls を使っていることが原因。
内部で各種イベント伝播が 「食べられて」しまう実装になっている。

「食べられて」が正しいのか知りませんが、こちらのIssueで気に入ったので使っていきます。
https://github.com/mrdoob/three.js/issues/16254

対策

OrbitControls.js から event.preventDefault() を削除することで、イベントを食べられないようにすることができます。

OrbitControls.js

  function onTouchStart( event ) {
    if ( scope.enabled === false ) return;
      // ↓こいつが邪魔なのでコメントアウト
      // event.preventDefault(); // prevent scrolling
      switch ( event.touches.length ) {

これで、clickに設定したイベント処理が実行されタッチパネルでも問題なく動くようになりました。

ちなみに、この変更による副作用も存在するようなのでご自身の環境で問題ないことを確認してくださいね。
(私の環境では特に問題なかった。多分)
https://github.com/mrdoob/three.js/pull/18612