xr - React Three Fiber应用的交互式沉浸体验转化工具

<p align="center"> <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/f74cac1e-3757-4010-9331-2f55ec935247.svg" width="100" /> </p> <h1 align="center">xr</h1> <h3 align="center">将任何R3F应用转变为交互式沉浸体验。</h3> <br/> <p align="center"> <a href="https://npmjs.com/package/@react-three/xr" target="_blank"> <img src="https://img.shields.io/npm/v/@react-three/xr?style=flat&colorA=000000&colorB=000000" alt="NPM" /> </a> <a href="https://npmjs.com/package/@react-three/xr" target="_blank"> <img src="https://yellow-cdn.veclightyear.com/0a4dffa0/b9a5b780-7517-4530-ab37-d1925def9f7b.svg?style=flat&colorA=000000&colorB=000000" alt="NPM" /> </a> <a href="https://twitter.com/pmndrs" target="_blank"> <img src="https://img.shields.io/twitter/follow/pmndrs?label=%40pmndrs&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000" alt="Twitter" /> </a> <a href="https://discord.gg/ZZjjNvJ" target="_blank"> <img src="https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=000000" alt="Discord" /> </a> </p>

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>
    </>
  )
}