
can you output it with all the astronomical terms applied precisely. also, set timefactor to visually acceptable value of 1000.: 1. Orbit: The path that a planet or other celestial body follows as it revolves around another body in space.

2. Perihelion: The point in a planet’s orbit at which it is closest to the Sun.

3. Aphelion: The point in a planet’s orbit at which it is farthest from the Sun.

4. Eccentricity: The degree to which an orbit deviates from a perfect circle; in other words, how “oval” or elongated an orbit is.

5. Inclination: The angle between a planet’s orbital plane and the plane of the ecliptic (the imaginary plane that Earth’s orbit follows as it revolves around the Sun).

6. Retrograde motion: The apparent backward motion of a planet in the sky, caused by the differing orbital speeds of Earth and the other planet.

7. Synodic period: The time it takes for a planet to return to the same position relative to Earth and the Sun, as seen from Earth.

8. Sidereal period: The time it takes for a planet to complete one orbit around the Sun, as measured with respect to the fixed stars.

9. Precession: The slow, cyclical wobbling of the Earth’s rotational axis that causes changes in the positions of the stars over long periods of time.

10. Tidal locking: The phenomenon by which a planet’s rotation and revolution become synchronized with each other, so that one side of the planet always faces its star.
it also will be nice if you somehow make it into full 3d, without any frameworks or third-paty libraries used.: <!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
background-color: black;
font-family: sans-serif;
}

#sun {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
border-radius: 50%;
background-color: yellow;
}

.planet {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border-radius: 50%;
animation-timing-function: linear;
opacity: 0.8;
}

#mercury {
animation: orbit-mercury 88d linear infinite;
background-color: #aaaaaa;
transform: translateX(50px);
}

#venus {
animation: orbit-venus 224.7d linear infinite;
background-color: #ff6600;
transform: translateX(80px);
}

#earth {
animation: orbit-earth 365.25d linear infinite;
background-color: #3366cc;
transform: translateX(110px);
}

@keyframes orbit-mercury {
from {
transform: rotate(0deg) translateX(50px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(50px) rotate(-360deg);
}
}

@keyframes orbit-venus {
from {
transform: rotate(0deg) translateX(80px) rotate(0deg) translateY(8.7px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(80px) rotate(-360deg) translateY(8.7px) rotate(-1.26deg);
}
}

@keyframes orbit-earth {
from {
transform: rotate(0deg) translateX(110px) rotate(0deg) translateY(23.4px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(110px) rotate(-360deg) translateY(23.4px) rotate(-1.57deg);
}
}

input[type=range], label[for=time-factor] {
display: inline-block;
vertical-align: middle;
}

label[for=time-factor] {
margin-right: 10px;
}

#time-factor {
width: 150px;
}
</style>
</head>
<body>
<div id="sun"></div>
<div id="mercury" class="planet"></div>
<div id="venus" class="planet"></div>
<div id="earth" class="planet"></div>
<label for="time-factor">Time factor:</label>
<input type="range" id="time-factor" min="0.1" max="10" step="0.1" value="1000">
<script>
const timeFactorInput = document.getElementById('time-factor');
const mercury = document.getElementById('mercury');
const venus = document.getElementById('venus');
const earth = document.getElementById('earth');
const inclination = 7;
const perihelion = { mercury: 46, venus: 107, earth: 147 };
const aphelion = { mercury: 69, venus: 109, earth: 152 };
const eccentricity = { mercury: 0.21, venus: 0.01, earth: 0.02 };
const siderealPeriod = { mercury: 88, venus: 224.7, earth: 365.25 };
const orbitalPeriod = { mercury: 87.97, venus: 224.7, earth: 365.25 };
const planetAxisAngle = { mercury: 0.01, venus: 2.64, earth: 23.44 };

let lastTime = null;
let timeElapsed = 0;
let timeFactor = 1;

function updateTimeFactor() {
timeFactor = parseFloat(timeFactorInput.value);
}

timeFactorInput.addEventListener('change', updateTimeFactor);

function animate(now) {
if (!lastTime) {
lastTime = now;
}
const deltaTime = now - lastTime;
lastTime = now;

timeElapsed += deltaTime * timeFactor;
const mercuryAngle = ((timeElapsed / (orbitalPeriod.mercury * 24 * 60 * 60)) * 360) + ((360 / siderealPeriod.mercury) * timeElapsed) - (planetAxisAngle.mercury * inclination);
const venusAngle = ((timeElapsed / (orbitalPeriod.venus * 24 * 60 * 60)) * 360) + ((360 / siderealPeriod.venus) * timeElapsed) - (planetAxisAngle.venus * inclination);
const earthAngle = ((timeElapsed / (orbitalPeriod.earth * 24 * 60 * 60)) * 360) + ((360 / siderealPeriod.earth) * timeElapsed) - (planetAxisAngle.earth * inclination);

const mercuryPerihelion = perihelion.mercury * (1 + eccentricity.mercury);
const mercuryAphelion = perihelion.mercury * (1 - eccentricity.mercury);
const mercuryDistance = ((mercuryPerihelion - mercuryAphelion) / 2) + mercuryAphelion;
mercury.style.transform = 'rotate(' + mercuryAngle + 'deg) translateX(' + mercuryDistance + 'px) rotate(' + -mercuryAngle + 'deg)';

const venusPerihelion = perihelion.venus * (1 + eccentricity.venus);
const venusAphelion = perihelion.venus * (1 - eccentricity.venus);
const venusDistance = ((venusPerihelion - venusAphelion) / 2) + venusAphelion;
venus.style.transform = 'rotate(' + venusAngle + 'deg) translateX(' + venusDistance + 'px) rotate(' + -venusAngle + 'deg)';

const earthPerihelion = perihelion.earth * (1 + eccentricity.earth);
const earthAphelion = perihelion.earth * (1 - eccentricity.earth);
const earthDistance = ((earthPerihelion - earthAphelion) / 2) + earthAphelion;
earth.style.transform = 'rotate(' + earthAngle + 'deg) translateX(' + earthDistance + 'px) rotate(' + -earthAngle + 'deg)';

requestAnimationFrame(animate);
}

animate(0);
</script>
</body>
</html>