title: outline a 3d object in three.js
body: <p>In many video games, I see a pattern where, when you mouse over an object, it will show a nice gradient highlight around the 2D form of the object. I set up a fairly basic Three.js scene with a sphere in it</p>
  
  <p>To begin, I set up my raycaster variables:</p>
  
  <pre><code>var projector = new THREE.Projector();
  var mouse2D = new THREE.Vector2(0, 0);
  var mouse3D = new THREE.Vector3(0, 0, 0);
  </code></pre>
  
  <p>Then I make a raycaster function</p>
  
  <pre><code>document.body.onmousemove = function highlightObject(event) {
      mouse3D.x = mouse2D.x = mouse2D.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse3D.y = mouse2D.y = mouse2D.y = -(event.clientY / window.innerHeight) * 2 + 1;
      mouse3D.z = 0.5;
  
      projector.unprojectVector(mouse3D, camera);
      var raycaster = new THREE.Raycaster(camera.position, mouse3D.sub(camera.position).normalize());
      var intersects = raycaster.intersectObject(mesh);
       if (intersects.length &gt; 0) {
           var obj = intersects[0].object; //the object that was intersected
           rotate = false;
       } else {
           rotate = true;
       }
  }
  </code></pre>
  
  <p>This will get me the OBJECT they are currently hovering hover. Now how would one actually make an outline around the object?</p>