I was playing with some particles in Three.js, and it hit me, how can i get particles both in front and behind some HTML content. Since this is rendered in a canvas and you probably don’t want your content loaded inside a canvas, I started to play with the thought of using two similar WebGL renderer, on under and one on top. And to then simulate the depth og the content in between, i used the clipping distance of the cameras in each scene.

Here is how the cameras setup:
(effectController.divDepth is the variable you can change in the control)

camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, effectController.divDepth, 2000 );
cameraOver = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, effectController.divDepth );

I added a controller (top right) for the depth of the DIV element (first time playing with the dat.GUI)

Download the expreiment here.

Fullscreen experiment here

Here is the Three.js example i used for this experiment: https://threejs.org/examples/#webgl_points_random