Using useHitTest ("@react-three/xr": "^5.0.1") with the newer version of XR

[timhc22]

I've seen a few examples of using useHitTest with versions of @react-three/xr lower than v5, but I'm not quite sure how to convert the syntax using the newer versions.. (and using useRef with Typescript, which might be a separate issue).

Here is an example of the older syntax:

plane detection with react-three/xr

and

https://codesandbox.io/s/react-xr-usehittest-demo-5iff9?file=/src/App.tsx

But I'm not sure (based on this react-three/xr documentation):

a. How to add sessionInit={{ requiredFeatures: ['hit-test'] }} to Canvas or XR tags, post deprecation of ARCanvas.

b. Whether hit.decompose is still needed.

c. Whether mesh.applyMatrix4(hitMatrix) is needed, or whether something like ref={hitPoint} is still needed

d. If using ref with Typescript, how to solve the Type 'MutableRefObject<undefined>' is not assignable error when adding to a mesh. As per this answer, maybe I need to force mount the component or something..

Any help or examples appreciated. Thanks

[CodyJasonBennett]

ARCanvas was depreciated for ARButton in v5 which provides needed configuration for an immersive-ar session. If you want to further tailor session configuration, see the props of XRButton.

hitMatrix.decompose(mesh.position, mesh.quaternion, mesh.scale) and mesh.applyMatrix4(hitMatrix) both set the mesh's transforms (position, rotation, scale) from the hit matrix -- you'd use one or the other. See useHitTest.

I'm not sure about your last question, but you could add a non-null assertion if TS is seeing incorrect undefined behavior -- e.g. requiring you to null-check in effects.

const mesh = React.useRef<THREE.Mesh>(null!) // non-null assertion so we don't null-check in later effects

useHitTest((hitMatrix: THREE.Matrix4, hit: XRHitTestResult) => {
  hitMatrix.decompose(mesh.current.position, mesh.current.quaternion, mesh.current.scale)
})

return (
  <mesh ref={mesh}>
    <boxGeometry />
    <meshBasicMaterial color="blue" />
  </mesh>
)

[timhc22]

I'm still having trouble getting the hittest to trigger, is this supposed to happen when I click the screen after activating AR on my mobile? I can't seen to see docs for it anywhere (happy to make a PR if needed)

[rudolphmax]

Hi @timhc22! Any updates regarding this? Were you able to find anything? I'd really like to get this working in our service.
Regards!

[timhc22]

yes, add:

        sessionInit={{
          requiredFeatures: [
            "local",
            "hit-test"
          ],

to the XR Button. Let me know if you have any other issues

[rudolphmax]

To the XR Component?

[timhc22]

 <XRButton
    className='xr-button'
    mode={'AR'}
    sessionInit={{
      requiredFeatures: [
        "local",
        "hit-test"
      ]