WebXR / VR / AR（Meta Quest 等の HMD で没入型）

npm install three @react-three/fiber @react-three/xr @react-three/drei

import { Canvas } from "@react-three/fiber"
import { XR, createXRStore } from "@react-three/xr"

const store = createXRStore()

export default function App() {
  return (
    <>
      <button onClick={() => store.enterVR()}>Enter VR</button>
      <Canvas>
        <XR store={store}>
          <ambientLight intensity={0.5} />
          <directionalLight position={[2, 4, 1]} />
          <mesh position={[0, 1.5, -2]}>
            <boxGeometry />
            <meshStandardMaterial color="orange" />
          </mesh>
        </XR>
      </Canvas>
    </>
  )
}

const store = createXRStore({
  // コントローラーの見た目（"default" | false | カスタム JSX）
  controller: { left: <LeftController />, right: <RightController /> },

  // ハンドトラッキング
  hand: { touchPointer: true },

  // フォビエイテッドレンダリング
  foveation: 1,           // 0〜1 (高いほど周辺を低解像度に)

  // フレームレート
  frameRate: "high",      // "high" | "low"

  // パススルー (AR)
  bounded: false,
  emulate: { syntheticEnvironment: true },
})

store.enterVR()
store.enterAR()
store.exit()

import { useXR } from "@react-three/xr"

function SceneInsideXR() {
  const session = useXR((s) => s.session)        // 現在のセッション
  const mode = useXR((s) => s.mode)              // "immersive-vr" | "immersive-ar" | null
  const referenceSpace = useXR((s) => s.originReferenceSpace)

  if (!session) return null  // 没入していないとき

  return <mesh />
}

import { XROrigin } from "@react-three/xr"

<XR store={store}>
  <XROrigin position={[0, 0, 5]} rotation={[0, Math.PI, 0]}>
    {/* この中の Camera / Controller / Hand が一緒に動く */}
  </XROrigin>
</XR>

import { useXRInputSourceEvent, useXRControllerLocomotion } from "@react-three/xr"

// トリガー / グリップなどのイベント
useXRInputSourceEvent("all", "select", (e) => {
  console.log("select", e.inputSource.handedness) // "left" | "right"
})

useXRInputSourceEvent("all", "selectstart", (e) => {})
useXRInputSourceEvent("all", "selectend",   (e) => {})
useXRInputSourceEvent("all", "squeeze",     (e) => {})

import { useXRInputSourceState } from "@react-three/xr"
import { useFrame } from "@react-three/fiber"

function ThumbstickReader() {
  useFrame(() => {
    const state = useXRInputSourceState.getState() // 全 input source
    // ↑ Hooks は Hook ルール上 useFrame の中で呼べないので、
    //   実際は Hook を上で呼んで ref で取る or zustand selector

    // 代替: useXR で gamepad から
  })
  return null
}

import { useXRInputSourceState } from "@react-three/xr"

function Player() {
  const left = useXRInputSourceState("controller", "left")
  const right = useXRInputSourceState("controller", "right")

  useFrame(() => {
    // gamepad はネイティブな Gamepad API 互換
    const xAxis = right?.gamepad?.["xr-standard-thumbstick"]?.xAxis ?? 0
    const yAxis = right?.gamepad?.["xr-standard-thumbstick"]?.yAxis ?? 0

    const aPressed = right?.gamepad?.["a-button"]?.button ?? 0
    const triggerVal = right?.gamepad?.["xr-standard-trigger"]?.button ?? 0
  })
}

import { TeleportTarget, useXRControllerLocomotion } from "@react-three/xr"

function Floor() {
  return (
    <TeleportTarget>
      <mesh rotation-x={-Math.PI / 2}>
        <planeGeometry args={[20, 20]} />
        <meshStandardMaterial />
      </mesh>
    </TeleportTarget>
  )
}

import { useXRControllerLocomotion } from "@react-three/xr"

function PlayerMovement() {
  // 左スティック移動 + 右スティック回転（スナップ or スムーズ）
  useXRControllerLocomotion({
    speed: 2,
    rotationSpeed: 1,
    rotationType: "snap",       // "snap" | "smooth"
    snapAngle: 30,              // degrees
  })
  return null
}

import { useXRInputSourceState, XRHandModel } from "@react-three/xr"

// store でハンド有効化（デフォルト on）
const store = createXRStore({
  hand: { touchPointer: true, rayPointer: true, grabPointer: true },
})

function HandReader() {
  const left = useXRInputSourceState("hand", "left")
  const right = useXRInputSourceState("hand", "right")

  useFrame(() => {
    // ピンチ判定
    const pinching = right?.inputSource?.hand?.get("index-finger-tip")
    // ジョイント位置: hand.get("wrist"), "thumb-tip", "middle-finger-tip" 等
  })
}

import { Container, Text, Root } from "@react-three/uikit"

<Root>
  <Container width={400} height={200} backgroundColor="black" padding={16}>
    <Text fontSize={32} color="white">Score: 100</Text>
  </Container>
</Root>

<button onClick={() => store.enterAR()}>Enter AR</button>

<Canvas>
  <XR store={store}>
    {/* 背景は透過。シーンが現実に重畳表示される */}
    <mesh position={[0, 1, -1]}>
      <sphereGeometry args={[0.1]} />
      <meshStandardMaterial color="cyan" />
    </mesh>
  </XR>
</Canvas>

import { useXRHitTest, XROrigin } from "@react-three/xr"

function Reticle() {
  const ref = useRef<THREE.Mesh>(null)
  useXRHitTest((results, getWorldMatrix) => {
    if (results.length > 0 && ref.current) {
      const m = getWorldMatrix(new THREE.Matrix4(), results[0])
      ref.current.matrix.copy(m!)
      ref.current.matrixAutoUpdate = false
      ref.current.visible = true
    }
  }, "viewer")  // viewer space で測る

  return (
    <mesh ref={ref} visible={false}>
      <ringGeometry args={[0.07, 0.1, 32]} rotation-x={-Math.PI/2} />
      <meshBasicMaterial color="white" />
    </mesh>
  )
}

import { useVideoTexture } from "@react-three/drei"

// uikit / @react-three/xr の VideoLayer など
<mesh>
  <planeGeometry args={[2, 1.125]} />
  <meshBasicMaterial map={videoTexture} />
</mesh>

<Canvas
  gl={{ powerPreference: "high-performance" }}
  dpr={[1, 1.5]}
>
  ...
</Canvas>

// XR 中は内部で解像度が決まる。Three.js の場合:
gl.xr.setFramebufferScaleFactor(1.0)  // 0.5 〜 1.5

brew install android-platform-tools

adb devices
# List of devices attached
# 1WMHHxxxxxxxx   device

# 開発機の Web サーバを Quest にフォワード
adb reverse tcp:5173 tcp:5173

# Quest Browser で http://localhost:5173 にアクセスできる！

import { IfInSessionMode } from "@react-three/xr"

<XR store={store}>
  <OrbitControls />   {/* XR セッション中は自動で無効 */}

  <IfInSessionMode allow="immersive-vr">
    <PlayerMovement />  {/* VR 中だけ */}
  </IfInSessionMode>

  <IfInSessionMode allow={["immersive-ar"]}>
    <Reticle />
  </IfInSessionMode>

  <IfInSessionMode deny={["immersive-vr", "immersive-ar"]}>
    {/* 非 XR 表示時 */}
  </IfInSessionMode>
</XR>

import { PositionalAudio } from "@react-three/drei"

<mesh>
  <PositionalAudio url="/sound.mp3" distance={1} loop />
</mesh>

function rumble(controller: XRInputSource) {
  const actuator = controller.gamepad?.hapticActuators?.[0]
  actuator?.pulse(0.7, 100)  // intensity, ms
}

// vite.config.ts
import { defineConfig } from "vite"
import basicSsl from "@vitejs/plugin-basic-ssl"

export default defineConfig({
  plugins: [basicSsl()],
  server: { host: true, https: true, port: 5173 },
})

import { Canvas, useFrame } from "@react-three/fiber"
import {
  XR, createXRStore, XROrigin, useXRInputSourceState,
  useXRInputSourceEvent, IfInSessionMode,
} from "@react-three/xr"
import { useRef, useState } from "react"
import * as THREE from "three"

const store = createXRStore({ foveation: 1 })

function Bullet({ from, dir }: { from: THREE.Vector3, dir: THREE.Vector3 }) {
  const ref = useRef<THREE.Mesh>(null!)
  useFrame((_, dt) => {
    ref.current.position.addScaledVector(dir, 30 * dt)
  })
  return (
    <mesh ref={ref} position={from}>
      <sphereGeometry args={[0.02]} />
      <meshBasicMaterial color="yellow" />
    </mesh>
  )
}

function Player() {
  const right = useXRInputSourceState("controller", "right")
  const [bullets, setBullets] = useState<any[]>([])

  useXRInputSourceEvent("right", "select", (e) => {
    const space = e.inputSource.targetRaySpace
    // gripSpace の world matrix から発射位置 / 方向を計算
    // 省略：ここで bullet を spawn
    setBullets((b) => [...b, { id: Date.now(), from, dir }])
  })

  return (
    <>
      {bullets.map((b) => <Bullet key={b.id} from={b.from} dir={b.dir} />)}
    </>
  )
}

export default function App() {
  return (
    <>
      <button onClick={() => store.enterVR()}>Enter VR</button>
      <Canvas>
        <XR store={store}>
          <ambientLight intensity={0.7} />
          <directionalLight position={[5, 10, 5]} />
          <XROrigin />
          <mesh rotation-x={-Math.PI/2} receiveShadow>
            <planeGeometry args={[50, 50]} />
            <meshStandardMaterial />
          </mesh>
          <IfInSessionMode allow="immersive-vr">
            <Player />
          </IfInSessionMode>
        </XR>
      </Canvas>
    </>
  )
}