New Syntax for ARCanvas requiredFeatures: ['hit-test']

[timhc22]

The older version of the library seems to use this syntax:

<ARCanvas sessionInit={{ requiredFeatures: ['hit-test'] }}>

Along with useHitTest as exampled here: https://stackoverflow.com/questions/70496077/plane-detection-with-react-three-xr

I'm really struggling to figure out what the new syntax is with the XR component, I've tried:

<XR
  referenceSpace="local-floor"
>

But useHitTest doesn't seem to be firing at all..

Any suggestions would be really appreciated here.

[CodyJasonBennett]

ARCanvas is now ARButton, so you would have:

import * as React from 'react'
import * as THREE from 'three'
import { Canvas } from '@react-three/fiber'
import { useHitTest, ARButton, XR } from '@react-three/xr'

function HitTest() {
  const mesh = React.useRef()

  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>
  )
}

function App() {
  return (
    <>
      <ARButton />
      <Canvas>
        <XR>
          <HitTest />
        </XR>
      </Canvas>
    </>
  )
}

[CodyJasonBennett]

@drcmda it seems that #167 has pretty clearly broken off from user expectations. I've documented releases and APIs as best as I can but for returning users I keep seeing questions like this come up. I don't have access to the sandboxes to update them for reference, maybe I should remove them and create my own?

[timhc22]

The object still doesn't seem to be 'sticking' to the surface annoyingly...

I'll try put an example together for codesandbox. Is here the best place to message about this?

[CodyJasonBennett]

I updated the example, seems that applyMatrix does some extra magic that isn't helpful here.

[timhc22]

Ok so I've put a very stripped back example here:
https://hittest-example.unegma.store/
https://github.com/unegma/hittest-example

The problem seems to be with local-floor, if I use that, the blue square, which you created @CodyJasonBennett, just floats around. I've tried the other optionalFeatures for sessionInit, but they just show either a white or black background!

(You may need to scroll down on mobile to see the button).

[timhc22]

I'm still not really sure how to use this, is useHitTest supposed to be triggered when a user clicks the screen? I have tried sending hit and hitMatrix data to my logging api, but I can't see any data ever coming through