Currently, I am working on a solar system model using Three.js. I have a function that calculates the position of the planet based on the day, but I am struggling to draw the correct elliptical orbit for the planet using a list of points generated from that function. I have searched extensively online but have not come across any examples. Can anyone guide me on how to achieve this?
Here are the functions I am working with - one for drawing the ellipse and the other 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) {
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;
}
After following @prisoner849's suggestion, the planets now move along their orbits. However, the orbit appears more like a "ring" than an ellipse. Can someone explain why it is being drawn this way?