Outline Pass

sghowing outline pass in threejs

by bob_mcbob

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

<script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>
<script src="https://threejs.org/examples/js/shaders/FXAAShader.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://threejs.org/examples/js/postprocessing/OutlinePass.js"></script>

CSS

body {
  margin: 0;
}

JavaScript

var camera, scene, renderer;
var geometry, material, mesh, material2, cube1, cube2;


init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.001, 10);
  camera.position.z = 1;
  camera.position.x = 0.2;
  camera.position.y = 0.4;
  var controls = new THREE.OrbitControls(camera);
  scene = new THREE.Scene();

  geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1)
  material = new THREE.MeshBasicMaterial({
    color: 0xff0000
  });
  cube1 = new THREE.Mesh(geometry, material);

  selectedObject = [];
  selectedObject.push(cube1);
  scene.add(cube1);

  material2 = new THREE.MeshBasicMaterial({
    color: 0x0000ff
  });
  cube2 = new THREE.Mesh(geometry, material2);
  cube2.position.set(0.1, 0.1, 0.1);
  selectedObject.push(cube2);
  scene.add(cube2);

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

  composer = new THREE.EffectComposer(renderer);
  var renderPass = new THREE.RenderPass(scene, camera);
  composer.addPass(renderPass);

  outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);

  outlinePass.edgeStrength = Number(10);
  outlinePass.edgeGlow = Number(0);
  outlinePass.edgeThickness = Number(1);
  outlinePass.pulsePeriod = Number(0);
  outlinePass.visibleEdgeColor.set("#ffffff");
  outlinePass.hiddenEdgeColor.set("#000000");
  outlinePass.selectedObjects = selectedObject;
  composer.addPass(outlinePass);

  effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);
  effectFXAA.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight);
  effectFXAA.renderToScreen = true;
  composer.addPass(effectFXAA);
  composer.addPass(outlinePass);


  document.body.appendChild(renderer.domElement);

}

function animate() {

  requestAnimationFrame(animate);

  composer.render();

}