xr

将任何R3F应用转变为交互式沉浸体验。

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

效果如何？

一个简单的场景，包含一个网格，通过触摸或指向点击时可以在"红色"和"蓝色"之间切换其材质颜色。

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 (
    <>
      <button onClick={() => store.enterAR()}>进入AR</button>
      <Canvas>
        <XR store={store}>
          <mesh pointerEventsType={{ deny: 'grab' }} onClick={() => setRed(!red)} position={[0, 1, -1]}>
            <boxGeometry />
            <meshBasicMaterial color={red ? 'red' : 'blue'} />
          </mesh>
        </XR>
      </Canvas>
    </>
  )
}

如何为@react-three/fiber应用启用XR？

1. const store = createXRStore() 创建一个xr存储
2. store.enterAR() 点击按钮时调用进入AR
3. <XR>...</XR> 用XR组件包裹你的内容

... 或阅读这份指南了解如何将react-three/fiber应用转换为XR。

教程

• 💾 存储
• 👌 交互
• 🔧 选项
• 🧊 物体检测
• ✴ 原点
• 🪄 传送
• 🕹️ 游戏手柄
• ➕ 次要输入源
• 📺 图层
• 🎮 自定义控制器/手部/...
• ⚓️ 锚点
• 📱 DOM覆盖
• 🎯 碰撞测试
• ⛨ 防护

路线图

• 🤳 XR手势
• 🕺 追踪身体
• ↕ react-three/controls

迁移指南

• 从@react-three/xr v5迁移
• 从natuerlich迁移

赞助商

本项目得到了几家公司和个人的支持，他们正在构建尖端的3D Web和XR体验。快来了解一下吧！