Magic Leap’s website has a nice world-inside-world effect. When you scroll, the camera pans backward from one world to the next, and the leaves from the tree flow from the inner world to the outer world.
How can we achieve this world-inside-world effect with Three.js? Any ideas on what direction to take or techniques?
Well, in 3D you probably need something like this 
Checkout this article for more information: OpenGL Programming/Mini-Portal - Wikibooks, open books for an open world
Also see this PR.
Not really polished but I did something similar in A-Frame using fragment shaders here: https://github.com/donmccurdy/webvr-experiments/tree/master/2-portal … not as fancy as the PR but doesn’t require any changes to the three.js renderer.
Cool! Got a demo online?
Unfortunately not. It was a variation on the effect I showed here, except using actual meshes instead of just photospheres.
Why cant you just use the stencil buffer?
Do you mean draw one scene on top of another and use the stencil buffer to selectively reveal the scene underneath?
oh hi - I was one of the people who worked on that;)
as you can probably extrapolate from the source, we didn’t use three, but the same effect can be accomplished in three or any other 3D framework in a few ways (esp. if like that example you’re only interested in Z-axis movement).
Without giving away the farm, two approaches I recommend looking up are (as mentioned) stencil buffers and, alternatively, render textures. Aside from these links and Don’s example, I recommend taking a look at AFrame’s Link Portals (I put a link to the source but am restricted by being a “new user” here;) - all valid ways to skin that cow, depending on the use case. Good luck!
