R3Fのマウスオーバーと、後ろに重なっているボタンに反応させないためには

マウスオーバー

R3Fのオブジェクトなどにマウスオーバーしたときに、ちょっと大きくしたり反応させたい。

XR空間ではInteractiveタグで囲って

<Interactive
        onSelect={handleClick}
        onHover={() => setHover(true)}
        onBlur={() => setHover(false)}
      >

みたいにしたら反応する。というのはこの記事でやった。

bibinbaleo.hatenablog.com

マウスオーバーはこれでは反応しないので、meshで囲んで書く。

<mesh
            onClick={handleClick}
            onPointerOver={() => setHover(true)}
            onPointerOut={() => setHover(false)}
          >

別々に設定しないといけないのめんどくさい

後ろに重なってるボタンオブジェクトを反応させない。

onClickを設定しているメッシュが二つ奥行き違いで重なっているとき、後ろの物も反応する。

onClickで呼ばれる関数を以下のように変えればクリック後の処理は反応しなくなった。

const handlePush = (event: any) => {
    event.stopPropagation();
    }
  };

ただこれだと今度はXRでの入力が反応しなくなった。

最終的にはこれでいい感じになった

const handlePush = (event: any) => {
if (event.nativeEvent) {
      event.stopPropagation();
    }
    }
  };

マウスオーバーなどはまだ反応するが・・・