plane detection with react-three/xr

Question

I`m using react-three/xr and react-three/drei in my next.js project. This code put the 3d model i an static position.

const Test: NextPage = () => {
return (
    <div className="testar">
        <ARCanvas>
            <ambientLight />
            <pointLight position={[10, 10, 10]} />
            <Suspense fallback={<Loader />}>
                <Model scale={0.01} />
            </Suspense>
        </ARCanvas>
    </div>
);

};

and it works correctly. now how can I detect the flat surface to place the object?

Answer 1

Add sessionInit={{ requiredFeatures: ['hit-test'] } to your AR canvas then use hit test to get the it location and add it as reference to your model

https://www.npmjs.com/package/@react-three/xr

export default function App(){
 
 let hitPoint = useRef()

     useHitTest((hitMatrix, hit) => {
        hitMatrix.decompose(
            hitPoint.current.position, 
            hitPoint.current.rotation, 
            hitPoint.current.scale,
        )
     })

 return(     
      <ARCanvas sessionInit={{ requiredFeatures: ['hit-test'] }}>
        <Model ref={hitPoint} />
     </ARCanvas>
 );
}

Answer 2

I have used the clues here to construct a simple model in codesandbox. (Code shown below)

The experience on my phone is that the model shows up nicely. When I click the Start AR button the box appears about where I am standing, about a meter off the ground.

However, I can't drag to place the box, and I don't see a reticle.

Do I need to process the hit result explicitly?

This isn't an answer, but this code might be informative for someone.

import { useRef } from "react";
import { ARCanvas, useHitTest } from "@react-three/xr";
import { OrbitControls } from "@react-three/drei";

export default function App() {
  // wrap to avoid error: React-three-fiber hooks can only be used within the Canvas
  function Model() {
    let hitPoint = useRef();

    useHitTest((hitMatrix, hit) => {
      hitMatrix.decompose(
        hitPoint.current.position,
        hitPoint.current.rotation,
        hitPoint.current.scale
      );
    });

    return <boxGeometry ref={hitPoint} args={[1, 1, 1]} />;
  }

  return (
    <div style={{ backgroundColor: "lightblue", height: "100vh" }}>
      <ARCanvas sessionInit={{ requiredFeatures: ["hit-test"] }}>
        <mesh>
          <ambientLight intensity={0.5} />
          <directionalLight position={[-10, -10, -10]} />
          <Model />
          <meshStandardMaterial color="orange" />
        </mesh>
        <OrbitControls />
      </ARCanvas>
    </div>
  );
}