feat: react-three/xr: anchors, dom overlay, hit tes

Author: bbohlender

packages/react/xr/package.json

@@ -1,42 +1,49 @@
 {
-    "name": "@react-three/xr",
-    "description": "VR/AR for react-three-fiber",
-    "author": "Bela Bohlender",
-    "license": "SEE LICENSE IN LICENSE",
-    "homepage": "https://github.com/pmndrs/xr",
-    "type": "module",
-    "keywords": [
-      "r3f",
-      "xr",
-      "ar",
-      "vr",
-      "three.js",
-      "react",
-      "typescript"
-    ],
-    "repository": {
-      "type": "git",
-      "url": "[email protected]:pmndrs/xr.git"
-    },
-    "files": [
-        "dist"
-    ],
-    "main": "dist/index.js",
-    "dependencies": {
-        "@pmndrs/xr": "workspace:^",
-        "suspend-react": "^0.1.3",
-        "zustand": "^4.5.2",
-        "@pmndrs/pointer-events": "workspace:^"
-    },
-    "scripts": {
-        "build": "tsc",
-        "check:prettier": "prettier --check src",
-        "check:eslint": "eslint 'src/**/*.ts'",
-        "fix:prettier": "prettier --write src",
-        "fix:eslint": "eslint 'src/**/*.ts' --fix"
-    },
-    "devDependencies": {
-        "@vitejs/plugin-react": "^4.3.0",
-        "vite": "^5.2.11"
-    }
-}
+  "name": "@react-three/xr",
+  "description": "VR/AR for react-three-fiber",
+  "author": "Bela Bohlender",
+  "license": "SEE LICENSE IN LICENSE",
+  "homepage": "https://github.com/pmndrs/xr",
+  "type": "module",
+  "keywords": [
+    "r3f",
+    "xr",
+    "ar",
+    "vr",
+    "three.js",
+    "react",
+    "typescript"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:pmndrs/xr.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "peerDependencies": {
+    "@react-three/fiber": ">=8",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "three": "*"
+  },
+  "dependencies": {
+    "@pmndrs/pointer-events": "workspace:^",
+    "@pmndrs/xr": "workspace:^",
+    "suspend-react": "^0.1.3",
+    "tunnel-rat": "^0.1.2",
+    "zustand": "^4.5.2"
+  },
+  "scripts": {
+    "build": "tsc",
+    "check:prettier": "prettier --check src",
+    "check:eslint": "eslint 'src/**/*.ts'",
+    "fix:prettier": "prettier --write src",
+    "fix:eslint": "eslint 'src/**/*.ts' --fix"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.0",
+    "vite": "^5.2.11"
+  }
+}

packages/react/xr/src/anchor.tsx

@@ -0,0 +1,124 @@
+import { requestXRAnchor, XRAnchorOptions } from '@pmndrs/xr'
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react'
+import { useXR, useXRStore } from './xr.js'
+
+export {
+  requestXRAnchor,
+  type XRAnchorOptions,
+  //requestXRPersistentAnchor,
+  //loadXRPersistentAnchor,
+  //deleteXRPersistentAnchor,
+} from '@pmndrs/xr'
+
+/**
+ * hook that returns a function that allows to request a xr anchor
+ */
+export function useRequestXRAnchor() {
+  const store = useXRStore()
+  return useMemo(() => requestXRAnchor.bind(null, store), [store])
+}
+
+/**
+ * hook that returns a function that allows to request a xr persistent anchor
+ *
+export function useRequestXRPersistentAnchor() {
+  const store = useXRStore()
+  return useMemo(() => requestXRPersistentAnchor.bind(null, store), [store])
+}*/
+
+/**
+ * hook that returns a function that allows to load a xr persistent anchor
+ *
+export function useLoadXRPersistentAnchor() {
+  const session = useXR((xr) => xr.session)
+  return useMemo(() => (session != null ? loadXRPersistentAnchor.bind(null, session) : undefined), [session])
+}*/
+
+/**
+ * hook that returns a function that allows to delete a xr persistent anchor
+ *
+export function useDeleteXRPersistentAnchor() {
+  const store = useXRStore()
+  return useMemo(() => deleteXRPersistentAnchor.bind(null, store), [store])
+}*/
+
+/*
+export function useXRPersistentAnchor(
+  id: string,
+): [anchor: XRAnchor | undefined, createAnchor: (options: XRAnchorOptions) => Promise<XRAnchor | undefined>] {
+  const cleanup = useRef<(() => void) | undefined>(() => {})
+  const store = useXRStore()
+  const session = useXR((xr) => xr.session)
+  const [anchor, setAnchor] = useState<XRAnchor | undefined>(undefined)
+  useEffect(() => {
+    if (session == null) {
+      return
+    }
+    cleanup.current?.()
+    cleanup.current = undefined
+    let cancelled = false
+    cleanup.current = () => (cancelled = true)
+    loadXRPersistentAnchor(session, id).then((anchor) => {
+      if (cancelled) {
+        anchor?.delete()
+        return
+      }
+      cleanup.current = () => anchor?.delete()
+      setAnchor(anchor)
+    })
+    return () => {
+      cleanup.current?.()
+      cleanup.current = undefined
+    }
+  }, [session, id])
+  const create = useCallback(
+    async (options: XRAnchorOptions) => {
+      await deleteXRPersistentAnchor(store, id)
+      cleanup.current?.()
+      cleanup.current = undefined
+      const abortRef = { current: false }
+      cleanup.current = () => (abortRef.current = true)
+      const anchor = await requestXRPersistentAnchor(store, id, options, abortRef)
+      if (abortRef.current) {
+        anchor?.delete()
+        return undefined
+      }
+      cleanup.current = () => anchor?.delete()
+      setAnchor(anchor)
+      return anchor
+    },
+    [id, store],
+  )
+  return [anchor, create]
+}*/
+
+/**
+ * hook for requesting and storing a single xr anchor
+ */
+export function useXRAnchor(): [
+  anchor: XRAnchor | undefined,
+  createAnchor: (options: XRAnchorOptions) => Promise<XRAnchor | undefined>,
+] {
+  const [anchor, setAnchor] = useState<XRAnchor | undefined>(undefined)
+  const cleanup = useRef<(() => void) | undefined>(() => {})
+  const store = useXRStore()
+  const create = useCallback(
+    async (options: XRAnchorOptions) => {
+      cleanup.current?.()
+      cleanup.current = undefined
+      let cancelled = false
+      cleanup.current = () => (cancelled = true)
+      const anchor = await requestXRAnchor(store, options)
+      if (cancelled) {
+        anchor?.delete()
+        return undefined
+      }
+      cleanup.current = () => anchor?.delete()
+      setAnchor(anchor)
+      return anchor
+    },
+    [store],
+  )
+  useEffect(() => () => void cleanup.current?.(), [])
+  return [anchor, create]
+}

packages/react/xr/src/contexts.tsx

@@ -1,4 +1,4 @@
-import { GetXRSpace, XRInputSourceState } from '@pmndrs/xr/internals'
+import { XRInputSourceState } from '@pmndrs/xr/internals'
 import { createContext } from 'react'
 import { XRStore } from './xr.js'
 import { CombinedPointer } from '@pmndrs/pointer-events'
@@ -7,5 +7,5 @@ export const xrContext = createContext<XRStore | undefined>(undefined)
 export const xrMeshContext = createContext<XRMesh | undefined>(undefined)
 export const xrPlaneContext = createContext<XRPlane | undefined>(undefined)
 export const xrInputSourceStateContext = createContext<XRInputSourceState | undefined>(undefined)
-export const xrReferenceSpaceContext = createContext<GetXRSpace | undefined>(undefined)
+export const xrReferenceSpaceContext = createContext<XRSpace | undefined>(undefined)
 export const combinedPointerContext = createContext<CombinedPointer | undefined>(undefined)

packages/react/xr/src/default.tsx

@@ -1,5 +1,4 @@
 import {
-  GetXRSpace,
   defaultGrabPointerOpacity,
   defaultRayPointerOpacity,
   defaultTouchPointerOpacity,
@@ -25,11 +24,11 @@ import {
   PointerCursorModel,
   PointerRayModel,
   useGrabPointer,
-  usePointerXRSessionEvent,
+  usePointerXRInputSourceEvents,
   useRayPointer,
   useTouchPointer,
 } from './pointer.js'
-import { XRSpace } from './space.js'
+import { XRSpace as XRSpaceImpl } from './space.js'
 import { xrInputSourceStateContext } from './contexts.js'
 import { TeleportPointerRayModel } from './teleport.js'
 import { createPortal, useFrame, useThree } from '@react-three/fiber'
@@ -50,7 +49,7 @@ export {
 
 function DefaultXRInputSourceGrabPointer(
   event: 'select' | 'squeeze',
-  getSpace: (source: XRInputSource) => GetXRSpace,
+  getSpace: (source: XRInputSource) => XRSpace,
   options: DefaultXRInputSourceGrabPointerOptions,
 ) {
   const state = useContext(xrInputSourceStateContext)
@@ -59,14 +58,14 @@ function DefaultXRInputSourceGrabPointer(
   }
   const ref = useRef<Object3D>(null)
   const pointer = useGrabPointer(ref, state, options)
-  usePointerXRSessionEvent(pointer, state.inputSource, event)
+  usePointerXRInputSourceEvents(pointer, state.inputSource, event, state.events)
   const cursorModelOptions = options.cursorModel
   return (
-    <XRSpace ref={ref} space={getSpace(state.inputSource)}>
+    <XRSpaceImpl ref={ref} space={getSpace(state.inputSource)}>
       {cursorModelOptions !== false && (
         <PointerCursorModel pointer={pointer} opacity={defaultGrabPointerOpacity} {...spreadable(cursorModelOptions)} />
       )}
-    </XRSpace>
+    </XRSpaceImpl>
   )
 }
 
@@ -84,7 +83,7 @@ function DefaultXRInputSourceGrabPointer(
 export const DefaultXRHandGrabPointer = DefaultXRInputSourceGrabPointer.bind(
   null,
   'select',
-  (inputSource) => () => inputSource.hand!.get('index-finger-tip'),
+  (inputSource) => inputSource.hand!.get('index-finger-tip')!,
 )
 
 /**
@@ -126,18 +125,18 @@ export function DefaultXRInputSourceRayPointer(options: DefaultXRInputSourceRayP
   }
   const ref = useRef<Object3D>(null)
   const pointer = useRayPointer(ref, state, options)
-  usePointerXRSessionEvent(pointer, state.inputSource, 'select')
+  usePointerXRInputSourceEvents(pointer, state.inputSource, 'select', state.events)
   const rayModelOptions = options.rayModel
   const cursorModelOptions = options.cursorModel
   return (
-    <XRSpace ref={ref} space={state.inputSource.targetRaySpace}>
+    <XRSpaceImpl ref={ref} space={state.inputSource.targetRaySpace}>
       {rayModelOptions !== false && (
         <PointerRayModel pointer={pointer} opacity={defaultRayPointerOpacity} {...spreadable(rayModelOptions)} />
       )}
       {cursorModelOptions !== false && (
         <PointerCursorModel pointer={pointer} opacity={defaultRayPointerOpacity} {...spreadable(cursorModelOptions)} />
       )}
-    </XRSpace>
+    </XRSpaceImpl>
   )
 }
 
@@ -160,15 +159,15 @@ export function DefaultXRHandTouchPointer(options: DefaultXRHandTouchPointerOpti
   const pointer = useTouchPointer(ref, state, options)
   const cursorModelOptions = options.cursorModel
   return (
-    <XRSpace ref={ref} space={() => state.inputSource.hand.get('index-finger-tip')}>
+    <XRSpaceImpl ref={ref} space={state.inputSource.hand.get('index-finger-tip')!}>
       {cursorModelOptions !== false && (
         <PointerCursorModel
           pointer={pointer}
           opacity={defaultTouchPointerOpacity}
           {...spreadable(cursorModelOptions)}
         />
       )}
-    </XRSpace>
+    </XRSpaceImpl>
   )
 }
 
@@ -329,7 +328,7 @@ export function DefaultXRInputSourceTeleportPointer(options: DefaultXRInputSourc
     },
     'teleport',
   )
-  usePointerXRSessionEvent(pointer, state.inputSource, 'select')
+  usePointerXRInputSourceEvents(pointer, state.inputSource, 'select', state.events)
   const rayModelOptions = options.rayModel
   const cursorModelOptions = options.cursorModel
   const scene = useThree((state) => state.scene)
@@ -347,7 +346,7 @@ export function DefaultXRInputSourceTeleportPointer(options: DefaultXRInputSourc
   })
   return (
     <>
-      <XRSpace ref={ref} space={state.inputSource.targetRaySpace} />
+      <XRSpaceImpl ref={ref} space={state.inputSource.targetRaySpace} />
       {createPortal(
         <group ref={groupRef}>
           {rayModelOptions !== false && (

packages/react/xr/src/dom-overlay.tsx

@@ -0,0 +1,22 @@
+import { useXR } from './xr.js'
+import { forwardRef, HTMLProps, useEffect, useMemo } from 'react'
+import { createRoot } from 'react-dom/client'
+import tunnel from 'tunnel-rat'
+
+/**
+ * component to render html elements as overlay for handheld AR experiences
+ */
+export const XRDomOverlay = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>((props, ref) => {
+  const domOverlayRoot = useXR((xr) => xr.domOverlayRoot)
+  const { In, Out } = useMemo(tunnel, [])
+  useEffect(() => {
+    const root = createRoot(domOverlayRoot)
+    root.render(<Out />)
+    return () => root.unmount()
+  }, [domOverlayRoot, Out])
+  return (
+    <In>
+      <div {...props} ref={ref} />
+    </In>
+  )
+})