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

Question

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

Answer 1

Well i found an example of hit-test with "@react-three/xr": "^5.1.2", maybe it'll help u

import React, { useRef } from "react";
// eslint-disable-next-line
import { XR, Controllers, Hands, ARButton, useHitTest } from "@react-three/xr";
// eslint-disable-next-line
import { Box, OrbitControls } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
// eslint-disable-next-line
import { Matrix4, Mesh } from "three";


const HitTestExample = () => {
  const ref = useRef(null!);

  useHitTest((hitMatrix: Matrix4, hit: XRHitTestResult) => {
    // @ts-ignore
    hitMatrix.decompose(ref.current.position, ref.current.quaternion, ref.current.scale);
  });

  return (
    <Box ref={ref} args={[0.1, 0.1, 0.1]}/>
  );
};

const App = () => {
  return (
    <>
      <ARButton sessionInit={{ requiredFeatures: ["hit-test"] }}/>
      <Canvas>
        <XR>
          <ambientLight />
          <pointLight position={[10, 10, 10]} />
          <HitTestExample />
          <Controllers />
        </XR>
      </Canvas>
    </>
  );
};

export default App;