title: Problem while rotating a 3D object with a rotating parent to face a given direction in Three.js
body: <p>I am trying to plot an scene where there is an Earth that rotates independently from the camera. In this planet I plot random bezier curves just like in this example: <a href="https://pubnub.github.io/webgl-visualization/" rel="nofollow noreferrer">https://pubnub.github.io/webgl-visualization/</a></p>
  
  <p>Therefore, I add my bezier line as:</p>
  
  <pre><code>    var origin = latLonToVector3(lat_source, lon_source, earth_radius);
      var destination = latLonToVector3(lat_destination, lon_destination, earth_radius);
      var bezierline = bezierCurveBetween(origin, destination);
      earth.add(bezierline);
  </code></pre>
  
  <p>so that the plotted line rotates along with the Earth. Then, I managed to load a 3D model of a plane and make it follow the bezier curve as it is being drawn. So far so good. Finally, I would like to rotate the plane so that its belly is always following a tangent line to the bezier curve. To that end, I computed the tangent vectors for every two points of the line as:</p>
  
  <pre><code>    var tangent_vectors = [];
  
      for (var i = 0; i &lt; pnts.length - 1; i++) {
  
              var aux = new THREE.Vector3();
  
              aux.subVectors(pnts[i+1], pnts[i]);
  
              tangent_vectors[i] = aux.normalize();
  
      }
  
  return tangent_vectors;
  </code></pre>
  
  <p>Just to check that these vectors are ok, I used a <code>THREE.ArrowHelper</code> to see if they are tangent to every segment of the curve and indeed they are. Since I add them to the scene with <code>earth.add( arrowHelper );</code> they also rotate with the planet and are consistent. I repeat this process over and over as the planet rotates by plotting and erasing the same bezier curve (same origin and destination).</p>
  
  <p>However, the 3D Model behaves fine for the first bezier curve but as the planet rotates and a new bezier curve is plotted at the same place (with the same origin and destination coordinates) I can see that the plane is still following (<code>plane.lookAt(tangent_vectors[point_index]);</code>) the tangent lines of the original bezier curve (even though I am recomputing the tangent lines).</p>
  
  <p>I think that the problem is that latitudes and longitudes (<code>lat_source</code>, <code>lon_source</code>, etc) are fixed in the real life reference framework. This causes that <code>origin</code> and <code>destination</code> variables always return the same values even though the planet is rotating. Then, the new bezier curves have essentially the same points but since I add these points using <code>earth.add(bezier_line);</code> Three.js internally takes care of rotating them to position them in the new rotation and this is not done with my tangent vectors.</p>
  
  <p>I think this is the problem, but I do not know how to solve it. I guess I need to also rotate the tangent vectos of the curve according to the new rotation but I can't find how to do it.</p>
  
  <p>Thanks for your help</p>