OrbitControls enabled set to false but still working

Questions
1

Im working with React and R3F. I have the enabled property set according to the showMenu state as shown below (toggled on button click). console.log() statements show the enabled property being changed but even when the property is set to false, I am still able to pan around using the mouse. Any help is appreciated

const Orbit = () => {
    const { camera, gl } = useThree();
    useFrame(() => {
      if (orbControls.current.enabled) orbControls.current.update();
    });
    return <orbitControls ref={orbControls} args={[camera, gl.domElement]} enabled={showMenu} />;
  }
2

I can’t see showMenu, but it could be that you’re checking or setting the state after the fact.

3

This isn’t the case. I’m watching the enabled property within the useFrame loop and it is false when showMenu is false as well

4

i would suggest you don’t use orbitcontrols like that, and im guessing you’re using three/examples/jsm/controls which would be worse. all three controls are bugged. they have constructor side effects, therefore a class cannot be safely created and discarded without knowing implementation details, it is considered an anti pattern. you can end up with multiple controls running at the same time bc of that. the issue is known and there’s a fix, but hasn’t been merged.

i would suggest to always use three-stdlib instead of jsm. this a pmndrs fork of three/examples/jsm. it was made to allow the react eco system to be stable and independent from threejs maintenance. all of drei uses that.

or better, there’s a ready-made abstraction in drei:

import { OrbitControls } from '@react-three/drei'

<OrbitControls enabled={condition} />