title: Find distance the mouse has moved along a vector in Three.js
body: <p>I'm trying to find the distance that the mouse has traveled along a normal vector.</p>
  
  <p>The idea is to move a set of vertices within an object along the intersecting face's normal vector.</p>
  
  <p>Currently, I have an onmousedown event handler that finds the intersecting face, adjacent faces with the same normal, and the vertices associated to those faces. I also have an onmousemove event handler that moves the vertices along the normal. </p>
  
  <p>Right now, the onmousemove just moves the vertices 1 unit along the face normal every time the event is fired. I'd like them to move with the mouse.</p>
  
  <p>The code that I am working off of came largely from the three.js editor. Any help is very much appreciated, thanks!</p>
  
  <pre><code>var object; // Set outside this code
  var camera; // Set outside this code
  var viewport; // Set outside this code
  var raycaster = new THREE.Raycaster();
  var point = new THREE.Vector2();
  var mouse = new THREE.Vector2();
  var _dragging = false;
  
  var faces = [];
  var vertices = [];
  
  function onMouseDown(event) {
  
      if (object === undefined || _dragging === true) {
          return;
      }
  
      event.preventDefault();
      event.stopPropagation();
  
      var intersect = getIntersects(event, object)[0];
  
      if (intersect &amp;&amp; intersect.face) {
  
          faces = getAdjacentNormalFaces(intersect.object.geometry, intersect.face);
          vertices = getFaceVertices(intersect.object.geometry, self.faces);
  
      }
  
      _dragging = true;
  
  }
  
  function onMouseMove(event) {
  
      if (object === undefined || vertices.length === 0 || _dragging === false) {
          return;
      }
  
      event.preventDefault();
      event.stopPropagation();
  
      var normal = faces[0].normal;
  
      /*
       * Get the distance to move the vertices
       */
      var distance = 1;
  
      var i;
      for (i = 0; i &lt; self.vertices.length; i++) {
  
          self.vertices[i].x += (normal.x * distance);
          self.vertices[i].y += (normal.y * distance);
          self.vertices[i].z += (normal.z * distance);
  
      }
  
      object.geometry.verticesNeedUpdate = true;
      object.geometry.computeBoundingBox();
      object.geometry.computeBoundingSphere();
  
  }
  
  var getIntersects = function (event, object) {
  
      var rect = viewport.getBoundingClientRect();
      point.fromArray([
          ( event.clientX - rect.left ) / rect.width,
          ( event.clientY - rect.top ) / rect.height
      ]);
  
      mouse.set(( point.x * 2 ) - 1, -( point.y * 2 ) + 1);
  
      raycaster.setFromCamera(mouse, camera);
      if (object instanceof Array) {
          return raycaster.intersectObjects(object);
      }
  
      return raycaster.intersectObject(object);
  
  };
  
  var getAdjacentNormalFaces = function (geometry, face) {
      // Returns an array of all faces that are adjacent and share the same normal vector
  };
  
  var getFaceVertices = function (geometry, faces) {
      // Returns an array of vertices that belong to the array of faces
  };
  </code></pre>
  
  <p><strong>Update:</strong>
  As a summary... I have the event handlers, the set of vertices that need to be moved and the normal vector that the vertices should be moved on. What I need is the offset distance that the vertices should be moved based on where the mouse is.</p>
  
  <p>My first thought is to create a plane perpendicular to the normal vector and track the mouse position on that plane. However, I am not sure 1. how to create the perpendicular plane where the largest side is visible to the camera and 2. how to translate the x/y coordinates of the mouse on the plane to the distance the vertices should be moved.</p>