three.js ~ Stencil Outline Composer Example

2016-02-03

HTML

<script src="http://threejs.org/build/three.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>

JavaScript

var camera, scene, light, renderer, geometry, material, mesh1, mesh2, mesh3, gl;

var composer2, finalComposer;
var controls;
var outlineMaterial;

createOutlineMaterial();
init();
animate();

function init() {
    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 1000;
    camera.position.y = 200;
    
    scene.add(camera);
    
    // controls
    controls = new THREE.OrbitControls( camera );

    material = new THREE.MeshNormalMaterial();

		var geometry1 = createBufferGeometry(true);
    mesh1 = new THREE.Mesh(geometry1, material);
    mesh1.scale.set(200, 200, 200);
    scene.add(mesh1);
    
  	var geometry2 = createBufferGeometry(true);
    mesh2 = new THREE.Mesh(geometry2, material);
    mesh2.scale.set(200, 200, 200);
    mesh2.position.set(150, 150, -150);
    scene.add(mesh2);
    
  	var geometry3 = createBufferGeometry(false);
    mesh3 = new THREE.Mesh(geometry3, material);
    mesh3.scale.set(200, 200, 200);
  	mesh3.position.set(50, 300, -500);
    scene.add(mesh3);
    
    renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.autoClear = false;
    
    var WIDTH = window.innerWidth;
    var HEIGHT = window.innerHeight;
    
    gl = renderer.getContext();

    document.body.appendChild(renderer.domElement);
    
    var renderTargetParameters = {
    		minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat
    };
    var renderTarget = new THREE.WebGLRenderTarget(WIDTH, HEIGHT, renderTargetParameters);

    composer2 = new THREE.EffectComposer(renderer, renderTarget);

    var maskPass = new THREE.MaskPass(mask, camera);
    //maskPass.inverse = false -> and outline object disappear
    maskPass.inverse = true;
    composer2.addPass(maskPass);

    var render2Pass = new THREE.RenderPass(outline, camera);
   ...