pmndrs/xr

XR どんなR3Fアプリもインタラクティブで没入型の体験に変えましょう。

どんな感じ?

@react-3/ファイバーアプリでXRを有効にするには?

1. const store = createXRStore() XRストアを作成する
2. store.enterAR() ボタンをクリックして AR を呼び出します
3. ... コンテンツをXRコンポーネントでラップする

…または、react-three/fiberアプリをXRに変換するためのガイドをお読みください。

チュートリアル

• 💾 ストア
• 👆 相互作用
• 👌 ハンドル
• 🧊 物体検出
• ✴ 起源
• 🪄 テレポート
• 🕹️ ゲームパッド
• ➕ 二次入力ソース
• 📺 レイヤー
• 🎮 カスタムコントローラー/ハンド/…
• ⚓️ アンカー
• 📱 ドム・オーバーレイ
• 🎯 ヒットテスト
• ⛨ ガード

外部チュートリアル

• 🥇 WebXR First Steps React by Meta Quest

移民ガイド

• @react-THREE/XR v5から
• ナチュエルリッヒより

エージェントのスキル

xr Turn any R3F app into an interactive immersive experience.

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

What does it look like?

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

const store = createXRStore()

export function App() {
  const [red, setRed] = useState(false)
  return (
    <>
       store.enterAR()}>Enter AR
      
        
           setRed(!red)} position={[0, 1, -1]}>
            
            
          
        
      
    
  )
}

How to enable XR for your @react-three/fiber app?

1. const store = createXRStore() create a xr store
2. store.enterAR() call enter AR when clicking on a button
3. ... wrap your content with the XR component

… or read this guide for converting a react-three/fiber app to XR.

Tutorials

• 💾 Store
• 👆 Interactions
• 👌 Handles
• 🧊 Object Detection
• ✴ Origin
• 🪄 Teleport