DeviceOrientationControls undefined camera

[ChrisDesigns]

I've been trying to write an implementation for DeviceOrientationControls for drei as it does not have it implementation. When trying to construct DeviceOrientationControls, the camera object from the useThree hook returns undefined. I've tried to drilling-down the camera from canvas as prop with no luck. I've created a codesandbox example to showcase this problem. Does anyone have an idea of why it is returning undefined?

[stephencorwin]

The camera is actually defined in your example. The problem lies in how you are instantiating the component in the scene graph.
Components that are added to the catalog via extend() are expected to use camel casing as if they were a primative.

Perhaps the documentation could be updated to be more clear. 🤔
https://github.com/react-spring/react-three-fiber/blob/master/api.md#using-3rd-party-objects-declaratively

If you make this change, it should work.

extend({ DeviceOrientationControlsImp })

const DeviceOrientationControls = forwardRef((props, ref) => {
  const { camera } = useThree()
  const controls = useRef()

  useFrame(() => controls.current && controls.current.update())

  useEffect(() => {
    controls.current.connect()
    return () => controls.current && controls.current.dispose()
  })

-  return <DeviceOrientationControlsImp ref={mergeRefs([controls, ref])} args={[camera]} {...props} />
+  return <deviceOrientationControlsImp ref={mergeRefs([controls, ref])} args={[camera]} {...props} />
})

[ChrisDesigns]

Thank you very much, I would have not found that. I think when you extend, you imply the casing would remain the same. Although, I should have seen it in the other examples. It might be helpful to have this documented (as mentioned). Do you want me to make a PR to notate this?

[stephencorwin]

No problem 😄
Target the v5 branch if you don't mind. Thanks!