title: ThreeJS - Raycaster Arrow Helper
body: <p>I’m looking to add some model movement based on the mouse position, so I’m learning Raycaster.
  Only thing is, I don’t have a great way to visualize what my mouse is pointing at.
  Sounds dumb, but I’m learning that Raycaster can be offset via CSS then all hell breaks loose.
  I’d like to have a red beam indicator to verify that ThreeJS sees my mouse position as I do.</p>
  <p>My Efforts: Best I’ve been able to do is make mousedown event paint the red indicator (see code):
  <a href="https://i.imgur.com/0mDAVQ9.png" rel="nofollow noreferrer">Progress So Far</a></p>
  <p>The Problem: It doesn’t auto-update and doesn’t delete previous indicators, so lots of red lines.
  <a href="https://i.imgur.com/X2VqC06.png" rel="nofollow noreferrer">Problem</a></p>
  <p>Could you help a noob out? I’m slowly learning. :slight_smile:</p>
  <pre><code>//  Raycaster
      var Raycaster = new THREE.Raycaster();
      var Mouse = new THREE.Vector2();
  
      document.addEventListener( 'mousedown', function( event ) {
      Mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.clientWidth ) * 2 - 1;
      Mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.clientHeight ) * 2 + 1;
      
      Raycaster.setFromCamera( Mouse, camera );
  
      var intersects = Raycaster.intersectObjects( scene.children );
      if ( intersects.length &gt; 0 ) {
          var arrow = new THREE.ArrowHelper( Raycaster.ray.direction, Raycaster.ray.origin, 8, 0xff0000 );
          scene.add( arrow );
      }
      }, false );
  
  //  Animation Loop
      function animate() 
      {
          requestAnimationFrame(animate)
          controls.update()
          render()
  
          if (modelReady) mixer.update(clock.getDelta())
          LEFT_Rotate.rotation.y += 0.01;
          RIGHT_Rotate.rotation.y += 0.01;
      }
  </code></pre>