pmndrs/xr

XR 어떤 R3F 앱을 인터랙티브 몰입형 경험으로 바꿔보세요.

어떻게 생겼어?

@react-3/광섬유 앱에서 XR을 활성화하는 방법은?

1. const store = createXRStore() XR 저장소 생성
2. store.enterAR() 버튼을 클릭하면 AR 입장을 호출합니다
3. ... 콘텐츠를 XR 컴포넌트로 감싸세요

… 또는 react-three/fiber 앱을 XR로 변환하는 방법에 관한 이 가이드를 읽어보세요.

튜토리얼

• 💾 스토어
• 👆 상호작용
• 👌 손잡이
• 🧊 객체 탐지
• ✴ 기원
• 🪄 텔레포트
• 🕹️ 게임패드
• ➕ 2차 입력 소스
• 📺 레이어
• 🎮 커스텀 컨트롤러/핸즈/…
• ⚓️ 앵커
• 📱 돔 오버레이
• 🎯 히트 테스트
• ⛨ 경비병

외부 튜토리얼

• 🥇 WebXR 첫 단계 반응 by Meta Quest

이주 가이드

• @react-쓰리/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