Hiding Mapbox Map #153

Hi everyone,

I’m building an app where users can view a scene in both 3D (via Three.js / React Three Fiber) and on a 2D map (via Mapbox GL). I’m using the react-three-map package to combine the two views.

Current Setup

<R3F Canvas>
  {/* My 3D scene */}
</R3F Canvas>

<MapboxCanvas>
  <OverlayCanvas>
    {/* Same 3D scene again */}
  </OverlayCanvas>
</MapboxCanvas>

As you can see, the 3D scene is rendered twice — once in the root <Canvas>, and again in the overlay. I'd like to avoid this redundancy and simplify the architecture.

Problems

• I can temporarily hide the Mapbox canvas, but it's a bit hacky.
• I’m unable to fully disable Mapbox camera controls (pan/zoom).
• I want to control the camera using OrbitControls instead of Mapbox’s internal system.
• Ultimately, I’d like to remove the top-level <Canvas> and just rely on Mapbox + overlay.

Desired Setup

• Use Mapbox as the base canvas, rendered normally.
• Render the 3D scene as an overlay using OverlayCanvas.
• Be able to disable all Mapbox interactions (ideally programmatically).
• Have a toggle button to switch views, enabling or disabling the map as needed.

I've gotten parts of this working, but would really appreciate any guidance if you are able to— especially when it comes to:

• Disabling map interactions cleanly
• Controlling the scene camera independently

Thanks in advance!