Configurable Canvas Events

[arcasoy]

I'm working on an app that has events on all meshes and groups such as onPointerEnter, onPointerLeave, etc. In some cases, such as a user is manipulating the camera with OrbitControls, I want these events to turn off for efficiency sake. Long story short, I'd like to toggle the enabled attribute in this eventManagerFactory example. The efficiency toggle does work, dragging OrbitControls around when events are hard coded to false is smooth, while enabled drops some frames, but setting this attribute reactively isn't working.

To do so, I've attempted to put a similar eventManagerFactory within a useEffect with a dependency on the global boolean that toggles when the camera is manipulated:

  type canvasEventsParameters = Parameters<typeof Canvas>[0]['events']
  type canvasEventsParametersWithoutUndefined = Exclude<canvasEventsParameters, undefined>
  const [canvasEvents, setCanvasEvents] = useState<canvasEventsParametersWithoutUndefined>((state: any) => ({
    // Default configuration
    ...events(state),

    // Determines if the event layer is active
    enabled: true,
  }))

  useEffect(() => {
    let eventManagerFactory: Parameters<typeof Canvas>[0]['events'] = (state: any) => ({
      // Default configuration
      ...events(state),

      // Determines if the event layer is active
      enabled: controlsIsDragging,
      // Also tried this:
      // enabled: useCameraContext.getState().controlsIsDragging
    })
    setCanvasEvents(eventManagerFactory)
  }, [controlsIsDragging])

  return(
    <Canvas events={canvasEvents}>
       <Rest of Scene />
    </Canvas>
  )

The result is this, which I find odd considering that the type and initial state of the canvasEvents is a function. I'm wondering if this has been attempted before or if there are any suggestions? Additionally, if this is not currently feasible can be made so, I'd be interested in what can be done to implement this.

[CodyJasonBennett]

useState can accept a callback as a lazy initializer which it's consuming instead of merely storing a function. You'd have to wrap it as such when defining and setting it:

const [canvasEvents, setCanvasEvents] = useState<canvasEventsParametersWithoutUndefined>(() => (state: any) => ({
  // Default configuration
  ...events(state),

  // Determines if the event layer is active
  enabled: true,
}))

[ruslanvasylev]

Hi @arcasoy,

Did you get this issue solved? I have the same difficulty and cannot get the working canvas events into the canvas's events attribute.

My OrbitControls component is sending a signal back to my canvas wrapper, and here's how I set my state:

  const disableCanvasEvents = (active: boolean) => {
    setCanvasEvents(
      (state: any) => ({
        ...events(state),
        enabled: !active,
      }),
    );
  };

The props update, but for some reason, canvas events={canvasEvents} doesn't like it. even though the canvasEvents looks like this:

{ "priority": 1, "enabled": false, "handlers": {} }

Thank you

[arcasoy]

@ruslanvasylev I did in fact. I use Zustand state and ran into a similar issue where just adding my reactive state variable, like your active, would not update the canvas despite the variable correctly changing.

To resolve this, I added the getter for the zustand state within the function, for example: enabled: stateThatHasActiveInIt.getState().active. Not sure what you're using for that active signal, but if there's a way to add a getter for the state you may be able to resolve this issue similarly