Revealing a background under another in a 360 space

Hello everyone,

i’m pretty new to three js and i’m making some experiment.
What i’m trying to do now is to have two 360 background overlapping in a way that i only see one of them, and moving the camera around pointing always at a plane object i would like to see the second background through that object. Like a sort of magical magnifying glass.

I’ve started from this example three.js examples and now i’m stuck at this point
https://jsfiddle.net/tomthebearded/jcvo6z9g/401/
First of all the one that should be the always visible background is always hidden by the second. And second the second background should only visible inside the place a not viceversa.

If someons could help it will bu much appreciated.
Thanks

nevermind, i think i did
https://jsfiddle.net/tomthebearded/jcvo6z9g/457/