title: Three.js - How to get a THREE.ArrowHelper on a specified layer?
body: <p>I'm new to Three.js and trying to figure out how to put things on different layers.</p>
  
  <p>I have an Arrowhelper, which is initialized, configured and added to the scene like this:</p>
  
  <pre><code>    var arrowLeft = new THREE.ArrowHelper(direction, center, length, 0x884400);
      arrowLeft.layers.set(1);
      scene.add(arrowLeft);
  </code></pre>
  
  <p>I also have a Mesh which gets a font and a THREE.MeshPhongMaterial:</p>
  
  <pre><code>    var loader = new THREE.FontLoader();
      loader.load( 'fonts/helvetiker_bold.typeface.json', function ( font ) {
  
          var textGeo = new THREE.TextGeometry( "My Text", {
              font: font,
              size: 1 * globalScale,
              height: 0.01,
              curveSegments: 12
          });
  
          var textMaterial = new THREE.MeshPhongMaterial( { color: 0xff0000 } );
          var mesh = new THREE.Mesh( textGeo, textMaterial );
  
          mesh.layers.set(1);
          mesh.position.set( 2, 0, zPos);
  
          scene.add(mesh);
      } );
  </code></pre>
  
  <p>My render function looks like this:</p>
  
  <pre><code>    function render() 
      {
          camera.layers.set(1);
          renderer.render(scene, camera);
          controls.update();
      }
  </code></pre>
  
  <p>What I see as a result is only the mesh but not the arrow. What am I doing wrong?
  Logging the arrow object with console.log, tells me it is on layer 1 and visible.</p>
  
  <p>When I change the render function to: </p>
  
  <pre><code>    function render() 
      {
          camera.layers.set(0);
          renderer.render(scene, camera);
          controls.update();
      }
  </code></pre>
  
  <p>... only the arrow is shown. 
  I'm using three.js revision 85.</p>