# How to use FlyControls in react-three-fiber?

**URL:** <https://discourse.threejs.org/t/how-to-use-flycontrols-in-react-three-fiber/42896>\
**Category:** Questions\
**Tags:** controls\
**Created:** [September 25, 2022, 7:52am UTC](https://discourse.threejs.org/t/how-to-use-flycontrols-in-react-three-fiber/42896 "2022-09-25T07:52:39Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![tomf](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tomf/32/29789_2.png) [@tomf](https://discourse.threejs.org/u/tomf)\
**Post date:** [September 25, 2022, 7:52am UTC](https://discourse.threejs.org/t/how-to-use-flycontrols-in-react-three-fiber/42896/1 "2022-09-25T07:52:39Z")

</div>

I just changing OrbitControls to FlyControls.

However, it seems FlyControls is not working with PerspectiveCamera.

Am I missing some props for FlyControls?

I tried google. However, I cant find the react-three sample with FlyControls 😂

```javascript
function Product() {
  return (

    <Suspense fallback={null}>

      <Canvas >
        <PerspectiveCamera makeDefault fov={90} position={[0, 0, 10]} />
        <FlyControls
          autoForward={false}
          dragToLook={false}
          movementSpeed={10}
          rollSpeed={0.005}
          makeDefault
        />
        <color args={[0, 0, 0]} attach="background" />

        <Model />

        <ambientLight intensity={0.1} />

      </Canvas>
    </Suspense>

  )
}

```

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [September 25, 2022, 8:59am UTC](https://discourse.threejs.org/t/how-to-use-flycontrols-in-react-three-fiber/42896/2 "2022-09-25T08:59:12Z")

</div>

the abstraction in drei seems to be very old, it doesn’t react to changing the default camera. i’ve also looked into three-stdlib/flycontrols and it seems broken, it has constructor side-effects and doesn’t use pointer events. i’ve fixed both. it supports camera switches and should also work on mobile now.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 25, 2022, 9:10am UTC](https://discourse.threejs.org/t/how-to-use-flycontrols-in-react-three-fiber/42896/3 "2022-09-25T09:10:52Z")

</div>

/cc

> <https://stackoverflow.com/questions/73842766/how-to-use-flycontrols-in-react-three-fiber>

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 25, 2022, 9:12am UTC](https://discourse.threejs.org/t/how-to-use-flycontrols-in-react-three-fiber/42896/4 "2022-09-25T09:12:12Z")

</div>

> [@drcmda](#):
>
> i’ve also looked into threejs/examples/jsm/controls/flycontrols and it seems broken,

Sorry, but this statement is just wrong. The example works as intended on desktops (which was the original target platform): [three.js webgl - fly controls - earth](https://threejs.org/examples/misc_controls_fly)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [September 25, 2022, 9:42am UTC](https://discourse.threejs.org/t/how-to-use-flycontrols-in-react-three-fiber/42896/5 "2022-09-25T09:42:40Z")

</div>

well, it may be intended to be like that, i don’t know, it still has constructor side effects and doesn’t work on mobile. not picking up on changed cameras was drei’s fault.

but either way, all three are fixed: [fragrant-silence-yser4d - CodeSandbox](https://codesandbox.io/s/fragrant-silence-yser4d?file=/src/App.js)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 25, 2022, 9:49am UTC](https://discourse.threejs.org/t/how-to-use-flycontrols-in-react-three-fiber/42896/6 "2022-09-25T09:49:48Z")

</div>

It’s fair to say that `FirstPersonControls` and `FlyControls` should be ported to Pointer Events. TBH, I’m a bit surprised both classes were overlooked when other controls like `OrbitControls` or `TransformControls` were updated.

The side effects issue is also something that should be fixed. The related discussion is:

> <https://github.com/mrdoob/three.js/issues/20575>
>
> \*\*Is your feature request related to a problem? Please describe.\*\*
> 
> From what …I can tell, the vast majority of Three does not have side effects in the constructor. However, some (notably, Controls like \`OrbitControls\` and some others) subscribe to the DOM node in the constructor.
> 
> This makes some coding patterns unnatural (e.g. when used from React components) because we can't safely create the objects early without triggering the subscriptions, and thus we have to delay creating them just before we're ready for the subscription to happen.
> 
> \*\*Describe the solution you'd like\*\*
> 
> Although all Controls appear to attach DOM listeners in their constructor, some of them have \`connect / disconnect\` or \`attach / detach\` method pairs. My proposal is twofold:
> 
> \- Standardize on a set of convention for the method pair name across all Controls (and possibly, other objects, if any, that perform DOM subscriptions in Three).
> \- \*\*Behavior change:\*\* Do not connect by default — require the user to call \`connect\`.
> 
> The desired behavior is that constructing a Controls object never performs side effects, and it is safe to rely on GC to collect the object if it never gets used. Also, the desired behavior is that calling \`connect()\` and then \`disconnect()\` is equivalent to having just constructed the Controls object. You should be able to cycle them multiple times.
> 
> Regarding the API, I would propose to keep the constructor arguments as is, in order to make \`connect() / disconnect()\` a convention that can be dealt with in an abstraction without "knowing" about a particular Control being used.
> 
> For example:
> 
> \`\`\`js
> let controls = new OrbitControls(camera, domElement)
> 
> controls.connect(); // subscribes
> controls.disconnect(); // unsubscribes
> 
> controls.connect(); // subscribes again
> controls.connect(); // can't connect while connected — I think this should throw to find coding mistakes
> \`\`\`
> 
> \*\*Describe alternatives you've considered\*\*
> 
> \* Standardize on method names, but start out connected (like some Controls) already do. While this somewhat helps our use case, it's a bit convoluted to call \`disconnect()\` right after creating so it takes away from the goal to make this pattern feel first-class in React. The upside of this is that it wouldn't break existing consumers. (Even the method names could be added to classes with \`attach / detach\` as aliases until the next breaking change is viable.)
> \* Instead of a \`disconnect()\` API, have \`connect()\` return a disconnecting function. This is a popular pattern in some communities but Three seems to have a more traditional object-oriented API so it doesn't seem to fit.
> \* Have \`connect()\` accept the DOM node instead of the constructor. There is some benefit to this because it lets us create an object even before we have the DOM node if it's more natural for code organization. The downside of this is that different Controls might take different options, so the knowledge about this has to be leaked to the abstraction managing the \`connect / disconnect\` lifetime. Now it has to be involved with passing their options through. In a declarative paradigm like React, options can potentially change any time, so it would have to know how to compare the "previous" and the "next" options to avoid constantly reattaching.
> \* Do nothing. We have a viable workaround, but it's not ideal from the perf perspective (https://github.com/facebook/react/issues/20090#issuecomment-716652603) and it's likely to bite more people in the future. So it would be good to resolve this at the upstream level.
> 
> Thanks!

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [September 25, 2022, 9:51am UTC](https://discourse.threejs.org/t/how-to-use-flycontrols-in-react-three-fiber/42896/7 "2022-09-25T09:51:35Z")

</div>

yes, very odd. fly-controls was also the last remaining control that had these issues which is why i was wondering, i was sure we fixed it but this one must’ve fallen out. can these controls be upstreamed to jsm/controls perhaps? though we use types, which probably makes it harder. ☹

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 25, 2022, 9:55am UTC](https://discourse.threejs.org/t/how-to-use-flycontrols-in-react-three-fiber/42896/8 "2022-09-25T09:55:20Z")

</div>

I think I have the time to update both controls next week. I remember now that I have filed PRs for both classes in the past but Ricardo and I were not sure about renaming public variables and methods (meaning moving from the “mouse” to the “pointer” syntax), see.

> <https://github.com/mrdoob/three.js/pull/20170>
>
> see \[#20161 (comment)\](https://github.com/mrdoob/three.js/pull/20161#issuecommen…t-678796016).

> <https://github.com/mrdoob/three.js/pull/20168>
>
> see https://github.com/mrdoob/three.js/pull/20161#issuecomment-678796016

I’ll just fix the events for now and file different PRs for the renaming issue. That should be the less blocking approach.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 27, 2022, 9:02am UTC](https://discourse.threejs.org/t/how-to-use-flycontrols-in-react-three-fiber/42896/9 "2022-09-27T09:02:41Z")

</div>

FYI: Both controls support pointer events now. Will be available with `r145`.

> <https://github.com/mrdoob/three.js/pull/24693>
>
> Related issue: #20170, #20168
> 
> \*\*Description\*\*
> 
> This PR moves \`FlyControls\` …and \`FirstPersonControls\` from mouse to pointer events.
> 
> The original PRs were not merged since we were unsure about renaming properties and methods in the public scope. However, the affected entities are no part the actual public API so it is safe to rename them.