Three.js Stencil Buffer

by PhilQ

HTML

<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>

JavaScript

var scene, sceneStencil, camera, renderer, clock;

var box;

 function init() {

			var plane, planeGeometry, planeMaterial;
			var boxGeometry, boxMaterial;
			var index;

			scene = new THREE.Scene();
			sceneStencil = new THREE.Scene();

			clock = new THREE.Clock();

			camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
			camera.position.z = 10;

			planeGeometry = new THREE.PlaneGeometry( 2, 5 );

			// set colorWrite to "true" to see the area/shapes of the stencil test
			planeMaterial = new THREE.MeshBasicMaterial( { color: 0x0000ff, colorWrite: true, depthWrite: false } );

			for( index = 0; index < 5; index++ )
			{
				plane = new THREE.Mesh( planeGeometry, planeMaterial );
				plane.position.x = -10 + ( 5 * index );
				sceneStencil.add( plane );
			}

			boxGeometry = new THREE.BoxGeometry( 2, 2, 2 );
			boxMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000 } );

			box = new THREE.Mesh( boxGeometry, boxMaterial );
			scene.add( box );

			renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );

			renderer.autoClear = false;

			document.body.appendChild( renderer.domElement );

	}

	function animate() {

			requestAnimationFrame( animate );

			renderer.clear();

			clock.getDelta();

			// animate the box
			box.position.x = Math.cos( clock.elapsedTime ) * 10;

			var gl = renderer.context;

			// enable stencil test
			renderer.state.setStencilTest( true );

			// config the stencil buffer to collect data for testing
			renderer.state.setStencilFunc( gl.ALWAYS, 1, 0xff );
			renderer.state.setStencilOp( gl.REPLACE, gl.REPLACE, gl.REPLACE );

			// render shape for stencil test
			renderer.render( sceneStencil, camera );

			// set stencil buffer for testing
			renderer.state.setStencilFunc( gl.EQUAL, 1, 0xff );
			renderer.state.setStencilOp( gl.KEEP, gl.KEEP, gl.KEEP );

			// render actual scene
			renderer.render( scene, camera );

			// disable...