How to use FlyControls in react-three-fiber?

Questions
1

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 :joy:

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>

  )
}
2

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.

3

/cc

4

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

5

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

6

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:

7

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. :frowning:

8

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.

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

2 Likes
9

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

1 Like