Hiding Mapbox Map

[wconrad265]

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!