How do I implement this very common AR scenario in react-three/xr

1.4k views Asked by At

I'm trying to implement an iconic AR user scenario using react-three/xr. A typical scenario is:

  1. the user clicks a button to enter AR mode.

  2. the 3D model is automatically placed on a plane in front of the AR device, usually a floor but sometimes a wall.

  3. 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

0

There are 0 answers