title: How to render normals to surface of object in three.js
body: <p>I found <a href="https://threejs.org/examples/?q=norm#webgl_geometry_normals" rel="nofollow noreferrer">the example</a> in threejs.org, that draws arrows normals, it is what I need. But arrows is complexed object and created by ArrowHelper. 
  I looked in source code and found setDirection method. </p>
  
  <pre><code>function setDirection( dir ) {
  
      // dir is assumed to be normalized
  
      if ( dir.y &gt; 0.99999 ) {
  
          this.quaternion.set( 0, 0, 0, 1 );
  
      } else if ( dir.y &lt; - 0.99999 ) {
  
          this.quaternion.set( 1, 0, 0, 0 );
  
      } else {
  
          axis.set( dir.z, 0, - dir.x ).normalize();
  
          radians = Math.acos( dir.y );
  
          this.quaternion.setFromAxisAngle( axis, radians );
  
      }
  
  };
  </code></pre>
  
  <p>I tried to immpliment algorithm for setting rotation for Vector3 with using quaternion, but I still have norlams that looks at <code>{x: 0, y: 0, z: 0}</code>.</p>
  
  <p>And my question is:
  How to calculate an vector in order to draw a normal line from surface into space, in order to get the same picuter: <a href="https://i.stack.imgur.com/HZHmY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HZHmY.png" alt="enter image description here"></a></p>
  
  <p><strong>UPD</strong>:<br>
  I use CylinderGeometry.</p>
  
  <p><strong>UPD2</strong>:<br>
  I've resolved it. <a href="http://codepen.io/artzub/pen/zZXjdM" rel="nofollow noreferrer">Look at my codepen</a></p>