How to make the transparent Plane not fully-occlude the Sphere?

In the following pen, the flat surface (which is a combination of DOM element + transparent Mesh) intersects with the Sphere, but it doesn’t look right because the we can not see the Sphere behind the flat surface.

The Mesh has NoBlending enabled, which is what make the transparent mesh cut the Sphere so reveal the DOM behind it.

Any idea how we can make the part of the Sphere that is behind the surface appear to be visible?

Although it would be more expensive, I’m open to the idea of having a second <canvas> behind the DOM in order to draw the missing part of the Sphere. I’m still trying to imagine how I’d draw just that piece though.