title: Move an object along with an ellipse path
body: <p>I have a question about why my gltf object still cannot moving along the ellipse path that I've created? It keep moving out of the ellipse path even though I put the gltf object within the ellipse (ellipse.add(gltf.scene)). is there any problem about my code?.... how can I move the gltf object along the ellipse path...?</p>
  
  <p>I cant upload the gltf file to this website so the gltf model will not show in this case...</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
   &lt;html lang=""&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;style&gt;
          body{
              margin: 0;
              overflow: hidden;
          }
  
          canvas{
              height: 100%;
              width: 100%;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;script src="js/three.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/GLTFLoader.js"&gt;&lt;/script&gt;
      &lt;script src="js/OrbitControls.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          var width = window.innerWidth;
          var height = window.innerHeight;
          var arrayEll = [];
          var arrayPla = [];
  
          var scene = new THREE.Scene();
          var camera = new THREE.PerspectiveCamera(25, width / height, 1, 20000);
          camera.position.set(0, 50, 120);
          var renderer = new THREE.WebGLRenderer();
          renderer.setSize(width, height);
          renderer.setPixelRatio(window.devicePixelRatio);
          var ambientLight = new THREE.AmbientLight( 0xffffff );
          scene.add( ambientLight );  
          var controls = new THREE.OrbitControls(camera);
  
          document.body.appendChild(renderer.domElement);
          THREE.EllipseCurve.prototype.realPoint = function ( t ) {
              var radians = 2 * Math.PI * t;
              return new THREE.Vector3( this.xRadius * Math.cos( radians ), 0, this.yRadius * Math.sin( radians ) );
          };
  
  
          pluorbit = new THREE.EllipseCurve(0, 0, 50, 38, 0, Math.PI * 2, false, 0);
          var points = pluorbit.getPoints(50);
          var geometry = new THREE.BufferGeometry().setFromPoints(points);
          var material = new THREE.LineBasicMaterial({color: 0xFFFFFF, linewidth: 0.3});
          var ellipse = new THREE.Line(geometry, material);
          ellipse.rotation.x -= 190.1;
          ellipse.rotation.y += 0.15;
          scene.add(ellipse);
          arrayEll.push(ellipse);
  
  
          var loader = new THREE.GLTFLoader();
  
          var pluto;
          var plut = 0;
  
          loader.load( 'object.gltf', function ( gltf ) {
          pluto = gltf.scene;         
          gltf.scene.scale.set( 0.002, 0.002, 0.002 ); 
          var pt = pluorbit.realPoint(plut);
          gltf.scene.position.set(pt.x,pt.y,pt.z);
          scene.add( gltf.scene);
          arrayPla.push(pluto);
          });
  
  
          function animation(){
              requestAnimationFrame(animation);
              renderer.render(scene, camera);
              movingPlanet();
          }
          var mov = 0;
  
          function movingPlanet(){
              if(pluto != undefined){
                  plut += 0.00014;
                  var ps = pluorbit.realPoint(plut);
                  mov += 0.0055;
                  pluto.position.set(ps.x, (ps.y + mov) - 9, ps.z);
                  if(pluto.position.x &lt;= -49){
                      mov = -mov;
                  }
              }
          }
  
          animation();
  
      &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>