Add <FlyControls /> (#64)

* Add <FlyControls />

* Added Flycontrols to index

* Removed useEffect.
Using delta from useFrame.

* Updated README.

* Added fly controls story.

Co-authored-by: lucathebest <luca_marangon@inapl.com>

.storybook/stories/FlyControls.stories.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import { withKnobs, number, boolean } from '@storybook/addon-knobs'
+
+import { Setup } from '../Setup'
+
+import { FlyControls } from '../../src/FlyControls'
+import { Box } from '../../src/shapes'
+
+export function FlyControlsStory() {
+  return (
+    <>
+      <FlyControls
+        autoForward={boolean('AutoForward', false)}
+        dragToLook={boolean('DragToLook', false)}
+        movementSpeed={number('MovementSpeed', 1.0)}
+        rollSpeed={number('RollSpeed', 0.005)}
+      />
+      <Box>
+        <meshBasicMaterial attach="material" wireframe />
+      </Box>
+    </>
+  )
+}
+
+FlyControlsStory.storyName = 'Default'
+
+export default {
+  title: 'Controls/FlyControls',
+  component: FlyControls,
+  decorators: [withKnobs, (storyFn) => <Setup controls={false}>{storyFn()}</Setup>],
+}

README.md

@@ -47,6 +47,7 @@ Run the demo storybook on your computer:
   - `<OrthographicCamera/>` [![](https://img.shields.io/badge/-codesandbox-blue)](https://codesandbox.io/s/r3f-render-target-kdj94)
 - Controls
   - `<OrbitControls/>` [![](https://img.shields.io/badge/-codesandbox-blue)](https://codesandbox.io/s/r3f-contact-shadow-h5xcw)
+  - `<FlyControls/>`
   - `<MapControls/>` [![](https://img.shields.io/badge/-codesandbox-blue)](https://codesandbox.io/s/react-three-fiber-map-mkq8e)
   - `<DeviceOrientationControls/>`
   - `<TrackballControls/>`

src/FlyControls.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef, useRef } from 'react'
+import { ReactThreeFiber, extend, useThree, useFrame, Overwrite } from 'react-three-fiber'
+import { FlyControls as FlyControlsImpl } from 'three/examples/jsm/controls/FlyControls'
+// @ts-ignore
+import mergeRefs from 'react-merge-refs'
+
+extend({ FlyControlsImpl })
+
+export type FlyControls = Overwrite<
+  ReactThreeFiber.Object3DNode<FlyControlsImpl, typeof FlyControlsImpl>,
+  { target?: ReactThreeFiber.Vector3 }
+>
+
+declare global {
+  namespace JSX {
+    // eslint-disable-next-line @typescript-eslint/interface-name-prefix
+    interface IntrinsicElements {
+      flyControlsImpl: FlyControls
+    }
+  }
+}
+
+export const FlyControls = forwardRef((props: FlyControls, ref) => {
+  const controls = useRef<FlyControlsImpl>()
+  const { camera, gl } = useThree()
+  useFrame((state, delta) => controls.current?.update(delta))
+  return <flyControlsImpl ref={mergeRefs([controls, ref])} args={[camera, gl.domElement]} {...props} />
+})

src/index.tsx

@@ -2,6 +2,7 @@ export * from './OrbitControls'
 export * from './MapControls'
 export * from './TrackballControls'
 export * from './TransformControls'
+export * from './FlyControls'
 export * from './Detailed'
 export * from './PositionalAudio'
 export * from './PerspectiveCamera'