I'm trying to implement an iconic AR user scenario using react-three/xr. A typical scenario is:
the user clicks a button to enter AR mode.
the 3D model is automatically placed on a plane in front of the AR device, usually a floor but sometimes a wall.
the user is able to drag the model around to place it in a different location or on a different surface, using a reticle.
I cannot see how to do this in react-three/xr.
I'm using a variation on the code suggested in https://www.npmjs.com/package/@react-three/xr to drag the model around. I can move it, but I can't place
it. It would seem I need to do something with the result of the hit test. Do I also need to do explicit Plane (floor) detection and creation of the reticle?
import React from 'react'
import { DefaultXRControllers, ARCanvas, useHitTest } from '@react-three/xr'
import { Box, OrbitControls } from '@react-three/drei'
export default function Test() {
function HitTestExample() {
const ref = React.useRef()
useHitTest((hit) => {
hit.decompose(ref.current.position, ref.current.rotation, ref.current.scale)
})
return (<Box ref={ref} args={[1, 1, 1]} />
)
}
return (
<ARCanvas sessionInit={{ requiredFeatures: ['hit-test'] }}>
<ambientLight />
<directionalLight position={[-20, 10, -20]} />
<HitTestExample />
<OrbitControls />
<DefaultXRControllers />
</ARCanvas>
)
}
I see some code-heavy native three.js examples on GitHub from years ago, but nothing current.
Any help would be appreciated.
tia, Bill O