6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-02-26

環境

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

6
5
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?