javascript - Three.js draw ellipse from point list

Question

I’m coding a solar system model with Three.js. I have a function that calculates the planet position given the day, however I’m not able to draw the correct orbit of the planet (elliptic) starting from a list of points obtained from that function.I googled a lot but I haven’t found an example, how can I do this?

EDIT: these are my functions, one for drawing the ellipse and one for moving the planets

function drawOrbitTest(orbit) {

  var material = new THREE.LineBasicMaterial({ color: 0xffffff });

  var points = [];

  for (var i = 0; i < orbit.orbitPeriod; i += 7) {
    //basically what i'm trying to do here is calculating the position of the planet 
    //with an increment of one week for cycle
    if (orbit.orbitPeriod - i <= 7) {
      var endPoint = calcPosition(orbit, Date.now() + 86400 * 1000 * orbit.orbitPeriod);
      points.push(new THREE.Vector3(endPoint.x * AU, endPoint.y * AU, endPoint.z * AU));
      break;
    } else {
      var middlePoint = calcPosition(orbit, Date.now() + 86400 * 1000 * i);
      points.push(new THREE.Vector3(middlePoint.x * AU, middlePoint.y * AU, middlePoint.z * AU));
    }
  }

  var shape = new THREE.Shape(points);
  var geomShape = new THREE.ShapeBufferGeometry(shape);
  var material = new THREE.LineBasicMaterial(orbit.color);
  var ellipse = new THREE.Line(geomShape, material);
  scene.add(ellipse);
}

and

function rotateOnEllipse(obj, date) {
  var res = calcPosition(obj.orbit, date);
  obj.mesh.position.x = res.x * AU;
  obj.mesh.position.y = res.y * AU;
  obj.mesh.position.z = res.z * AU;
}

EDIT 2: I followed @prisoner849 suggestion, now it works, the planets move on their orbits. However, the orbit now is more like a "ring" than an ellipse; why is it drawn like that?

question from:https://stackoverflow.com/questions/65900935/three-js-draw-ellipse-from-point-list

Answer 1

The issue in the rendering of the line was caused by a bug in the function

calcPosition(orbit,date)