pmndrs/xr

XR 将任何R3F应用变成互动式沉浸式体验。

它看起来像什么？

如何为您的@react三/光纤应用启用XR？

1. const store = createXRStore() 创建一个 XR 存储
2. store.enterAR() 点击按钮时呼叫 enter AR
3. ... 用 XR 组件包装你的内容

…或者阅读这份关于将 react-three/fiber 应用转换为 XR 的指南。

教程

• 💾 商店
• 👆 相互作用
• 👌 手柄
• 🧊 物体检测
• ✴ 起源
• 🪄 传送
• 🕹️ 手柄
• ➕ 次级输入源
• 📺 层
• 🎮 自定义手柄/手型/…
• ⚓️ 主力店
• 📱 Dom 叠加层
• 🎯 击中测试
• ⛨ 卫兵

外部教程

• 🥇 WebXR 第一步反应 由 Meta Quest 提供

迁徙指南

• 来自@react-三/XR V5
• 来自Natuerlich

特工技能

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