Basic method to apply a stencil mask from objects in a scene to mask another scene

three-stencil-mask.js

/*
  Usage
  
    init () {
      const renderer = new THREE.WebGLRenderer()
      const camera = new THREE.PerspectiveCamera()
      
      renderer.autoClear = false // turn off clearing of renderer on each render-call
      
      const scene1 = new THREE.Scene() // scene with stencil objects
      const scene2 = new THREE.Scene() // scene with masked objects
      const scene3 = new THREE.Scene() // surrounding scene
    }
    update () {
      requestAnimationFrame(update)

      renderer.clear() // clear the renderer

      renderSceneStencilMask(scene1, scene2, camera, renderer) // render the mask 

      renderer.render(scene3, camera) // render the surrounding main scene
    }
*/

function renderSceneStencilMask (stencilScene, renderedScene, camera, renderer) {
  const gl = renderer.context
  
  gl.enable(gl.STENCIL_TEST)
  gl.stencilFunc(gl.ALWAYS, 1, 0xff)
  gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE)
  gl.depthMask(false)
  gl.colorMask(false, false, false, false);
  
  renderer.render( stencilScene, camera );
  
  gl.stencilFunc(gl.EQUAL, 1, 0xff)
  gl.depthMask(true)
  gl.colorMask(true, true, true, true);
  
  renderer.render( renderedScene, camera );
  
  gl.disable(gl.STENCIL_TEST)
}