react/xrのv5のコントローラー入力（レイでなにか押す＆コントローラーボタン）

react three fiberのxrのライブラリがv6になってた。

github.com

ドキュメントページも前なかった気がするけどある。

docs.pmnd.rs

ただv5の情報が見たい・・・

ブランチをold-masterにしたらいつも見てたページ！

github.com

今回何でもいいけどQuestのWebVR/ARの没入空間で何かトリガーを起こしたい

スマホなら2DUIとかmeshのonclickとかで入力できるけど、Questの没入状態だとできない。

コントローラーのレイで空中の何かをタップ
コントローラーのボタン

コントローラーのレイで空中の何かをタップ

old-masterのサムネにコントローラーのレイで入力しているものがあった！

https://github.com/pmndrs/xr/tree/old-master

CodeSandboxに飛ぶ

react-xr simple demo - CodeSandbox

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

で物体を囲めばいけるのか！

これで私もできた！！！！！！やったー！！なんか調べるのに時間かかった・・・

<Plane>はなぜか押せなかったので<mesh>で一度囲った

v6でもトップページに同じようなサンプルがあるけどv6を入れるとビルドでエラー出てまだ試せてない。

コントローラーのボタン

ここに書いてあることを渡して、ChatGPTに作ってもらったら一応できた。

ただGripのつもりなのに実際はTriggerに反応する

"use client";
import { Interactive, useXR } from "@react-three/xr";
import { useEffect, useState } from "react";
import * as THREE from "three";
interface XRControllerProps {
  handleLeftGripPress: (event: THREE.Event) => void;
  handleRightGripPress: (event: THREE.Event) => void;
}

export const XRControllerInput: React.FC<XRControllerProps> = ({
  handleLeftGripPress,
  handleRightGripPress,
}) => {
  const { controllers } = useXR();

  useEffect(() => {
    const leftController = controllers.find(
      (controller) =>
        controller.inputSource && controller.inputSource.handedness === "left"
    );
    const rightController = controllers.find(
      (controller) =>
        controller.inputSource && controller.inputSource.handedness === "right"
    );

    if (leftController) {
      leftController.grip.addEventListener("selectstart", handleLeftGripPress);
    }

    if (rightController) {
      rightController.grip.addEventListener(
        "selectstart",
        handleRightGripPress
      );
    }

    return () => {
      if (leftController) {
        leftController.grip.removeEventListener(
          "selectstart",
          handleLeftGripPress
        );
      }
      if (rightController) {
        rightController.grip.removeEventListener(
          "selectstart",
          handleRightGripPress
        );
      }
    };
  }, [controllers, handleLeftGripPress, handleRightGripPress]);

  return null;
};