704 lines
27 KiB
HTML
704 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Earth Orbit Simulator - Astronomical Accuracy</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
font-family: 'Courier New', monospace;
|
|
background: #000000;
|
|
}
|
|
canvas {
|
|
display: block;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
}
|
|
#info-panel {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
background: rgba(0, 0, 0, 0.85);
|
|
color: #00ff00;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
min-width: 300px;
|
|
border: 1px solid #00ff00;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
#time-controls {
|
|
position: absolute;
|
|
bottom: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: rgba(0, 0, 0, 0.85);
|
|
padding: 20px 30px;
|
|
border-radius: 8px;
|
|
border: 1px solid #00ff00;
|
|
min-width: 600px;
|
|
}
|
|
.control-group {
|
|
margin: 10px 0;
|
|
}
|
|
.control-group label {
|
|
color: #00ff00;
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-size: 12px;
|
|
}
|
|
.control-group input[type="range"] {
|
|
width: 100%;
|
|
margin: 5px 0;
|
|
}
|
|
.control-group input[type="datetime-local"] {
|
|
width: 100%;
|
|
background: #001100;
|
|
color: #00ff00;
|
|
border: 1px solid #00ff00;
|
|
padding: 5px;
|
|
border-radius: 4px;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
.button-group {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 15px;
|
|
flex-wrap: wrap;
|
|
}
|
|
button {
|
|
background: #003300;
|
|
color: #00ff00;
|
|
border: 1px solid #00ff00;
|
|
padding: 8px 16px;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 12px;
|
|
}
|
|
button:hover {
|
|
background: #005500;
|
|
}
|
|
button.active {
|
|
background: #00ff00;
|
|
color: #000000;
|
|
}
|
|
.data-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 5px 0;
|
|
padding: 5px 0;
|
|
border-bottom: 1px solid #003300;
|
|
}
|
|
.data-label {
|
|
color: #00aa00;
|
|
}
|
|
.data-value {
|
|
color: #00ff00;
|
|
font-weight: bold;
|
|
}
|
|
h3 {
|
|
margin: 0 0 15px 0;
|
|
color: #00ff00;
|
|
border-bottom: 2px solid #00ff00;
|
|
padding-bottom: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="info-panel">
|
|
<h3>EARTH ORBITAL DATA</h3>
|
|
<div class="data-row">
|
|
<span class="data-label">Current Date/Time:</span>
|
|
<span class="data-value" id="current-time">-</span>
|
|
</div>
|
|
<div class="data-row">
|
|
<span class="data-label">Julian Date:</span>
|
|
<span class="data-value" id="julian-date">-</span>
|
|
</div>
|
|
<div class="data-row">
|
|
<span class="data-label">Days since J2000:</span>
|
|
<span class="data-value" id="days-j2000">-</span>
|
|
</div>
|
|
<div class="data-row">
|
|
<span class="data-label">Rotation Angle:</span>
|
|
<span class="data-value" id="rotation-angle">-</span>
|
|
</div>
|
|
<div class="data-row">
|
|
<span class="data-label">Axial Tilt:</span>
|
|
<span class="data-value" id="axial-tilt">23.4393°</span>
|
|
</div>
|
|
<div class="data-row">
|
|
<span class="data-label">Orbital Position:</span>
|
|
<span class="data-value" id="orbital-position">-</span>
|
|
</div>
|
|
<div class="data-row">
|
|
<span class="data-label">Distance from Sun:</span>
|
|
<span class="data-value" id="sun-distance">-</span>
|
|
</div>
|
|
<div class="data-row">
|
|
<span class="data-label">Orbital Velocity:</span>
|
|
<span class="data-value" id="orbital-velocity">-</span>
|
|
</div>
|
|
<div class="data-row">
|
|
<span class="data-label">Precession Angle:</span>
|
|
<span class="data-value" id="precession-angle">-</span>
|
|
</div>
|
|
<div class="data-row">
|
|
<span class="data-label">Season:</span>
|
|
<span class="data-value" id="season">-</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="time-controls">
|
|
<div class="control-group">
|
|
<label>Time Travel (Date/Time)</label>
|
|
<input type="datetime-local" id="date-picker" />
|
|
</div>
|
|
<div class="control-group">
|
|
<label>Time Speed: <span id="speed-value">Paused</span></label>
|
|
<input type="range" id="time-speed" min="-100000" max="100000" value="0" step="100" />
|
|
<div style="display: flex; justify-content: space-between; font-size: 10px; color: #00aa00; margin-top: 5px;">
|
|
<span>← Reverse</span>
|
|
<span>Paused</span>
|
|
<span>Forward →</span>
|
|
</div>
|
|
</div>
|
|
<div class="button-group">
|
|
<button id="btn-reverse">◄◄ -1 Day/sec</button>
|
|
<button id="btn-slower">◄ Slower</button>
|
|
<button id="btn-pause" class="active">⏸ Pause</button>
|
|
<button id="btn-faster">Faster ►</button>
|
|
<button id="btn-forward">+1 Day/sec ►►</button>
|
|
<button id="btn-realtime">⏱ Real-time</button>
|
|
<button id="btn-reset">↺ Reset to Now</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
|
|
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script type="module">
|
|
import * as THREE from 'three';
|
|
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
|
|
|
// Scene, camera, renderer setup
|
|
let camera, scene, renderer, controls;
|
|
let sun, earth, earthOrbitLine;
|
|
let earthRotationGroup, earthTiltGroup, earthOrbitGroup;
|
|
|
|
// Astronomical constants (J2000.0 epoch)
|
|
const ASTRONOMICAL_CONSTANTS = {
|
|
// Earth orbital parameters
|
|
SEMI_MAJOR_AXIS: 149.598e6, // km (1 AU)
|
|
ECCENTRICITY: 0.0167086, // Orbital eccentricity
|
|
OBLIQUITY: 23.4392811, // Axial tilt in degrees (J2000)
|
|
SIDEREAL_YEAR: 365.256363004, // days
|
|
SIDEREAL_DAY: 0.99726968, // days (23h 56m 4.0916s)
|
|
PRECESSION_PERIOD: 25772, // years (axial precession)
|
|
|
|
// Orbital elements (J2000.0)
|
|
PERIHELION: 102.94719, // Longitude of perihelion (degrees)
|
|
MEAN_LONGITUDE: 100.46435, // Mean longitude at epoch (degrees)
|
|
|
|
// Scale for visualization (not to real scale, would be invisible!)
|
|
SCALE_DISTANCE: 100, // Scale factor for distances
|
|
EARTH_RADIUS: 6.371, // Earth radius in scaled units
|
|
SUN_RADIUS: 10, // Sun radius in scaled units
|
|
|
|
// J2000.0 epoch
|
|
J2000: 2451545.0, // Julian date of J2000.0 epoch (Jan 1, 2000, 12:00 TT)
|
|
};
|
|
|
|
// Simulation state
|
|
let simulationTime = new Date(); // Current simulation time
|
|
let timeSpeed = 0; // Time multiplier (0 = paused)
|
|
let lastFrameTime = performance.now();
|
|
|
|
init();
|
|
animate();
|
|
|
|
function init() {
|
|
// Camera setup
|
|
camera = new THREE.PerspectiveCamera(
|
|
45,
|
|
window.innerWidth / window.innerHeight,
|
|
0.1,
|
|
10000
|
|
);
|
|
camera.position.set(0, 150, 250);
|
|
|
|
// Scene
|
|
scene = new THREE.Scene();
|
|
scene.background = new THREE.Color(0x000005);
|
|
|
|
// Renderer
|
|
renderer = new THREE.WebGLRenderer({ antialias: true });
|
|
renderer.setPixelRatio(window.devicePixelRatio);
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
renderer.shadowMap.enabled = true;
|
|
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
|
|
document.body.appendChild(renderer.domElement);
|
|
|
|
// OrbitControls
|
|
controls = new OrbitControls(camera, renderer.domElement);
|
|
controls.enableDamping = true;
|
|
controls.dampingFactor = 0.05;
|
|
controls.minDistance = 20;
|
|
controls.maxDistance = 1000;
|
|
|
|
// Create solar system
|
|
createSolarSystem();
|
|
|
|
// Setup UI controls
|
|
setupControls();
|
|
|
|
// Add starfield background
|
|
createStarfield();
|
|
|
|
// Handle resize
|
|
window.addEventListener('resize', onWindowResize);
|
|
|
|
// Initialize to current date/time
|
|
resetToNow();
|
|
}
|
|
|
|
function createSolarSystem() {
|
|
// Sun (light source at origin)
|
|
const sunGeometry = new THREE.SphereGeometry(ASTRONOMICAL_CONSTANTS.SUN_RADIUS, 64, 64);
|
|
const sunMaterial = new THREE.MeshBasicMaterial({
|
|
color: 0xffff00,
|
|
emissive: 0xffff00,
|
|
emissiveIntensity: 1
|
|
});
|
|
sun = new THREE.Mesh(sunGeometry, sunMaterial);
|
|
scene.add(sun);
|
|
|
|
// Sun glow
|
|
const glowGeometry = new THREE.SphereGeometry(ASTRONOMICAL_CONSTANTS.SUN_RADIUS * 1.2, 64, 64);
|
|
const glowMaterial = new THREE.MeshBasicMaterial({
|
|
color: 0xffaa00,
|
|
transparent: true,
|
|
opacity: 0.3,
|
|
side: THREE.BackSide
|
|
});
|
|
const sunGlow = new THREE.Mesh(glowGeometry, glowMaterial);
|
|
sun.add(sunGlow);
|
|
|
|
// Sun point light (primary light source for Earth)
|
|
const sunLight = new THREE.PointLight(0xffffff, 3, 0, 0);
|
|
sunLight.castShadow = true;
|
|
sunLight.shadow.mapSize.width = 2048;
|
|
sunLight.shadow.mapSize.height = 2048;
|
|
sunLight.shadow.camera.near = 0.5;
|
|
sunLight.shadow.camera.far = 5000;
|
|
sun.add(sunLight);
|
|
|
|
// Earth orbital path (ellipse)
|
|
createEarthOrbit();
|
|
|
|
// Earth group hierarchy for proper rotation and tilt
|
|
// Structure: earthOrbitGroup (position) -> earthTiltGroup (tilt) -> earthRotationGroup (rotation) -> earth
|
|
earthOrbitGroup = new THREE.Group();
|
|
scene.add(earthOrbitGroup);
|
|
|
|
earthTiltGroup = new THREE.Group();
|
|
earthOrbitGroup.add(earthTiltGroup);
|
|
|
|
earthRotationGroup = new THREE.Group();
|
|
earthTiltGroup.add(earthRotationGroup);
|
|
|
|
// Earth sphere with texture
|
|
const earthGeometry = new THREE.SphereGeometry(ASTRONOMICAL_CONSTANTS.EARTH_RADIUS, 64, 64);
|
|
|
|
// Load Earth texture
|
|
const textureLoader = new THREE.TextureLoader();
|
|
const earthTexture = textureLoader.load(
|
|
'https://cdn.jsdelivr.net/gh/mrdoob/three.js/examples/textures/planets/earth_atmos_2048.jpg'
|
|
);
|
|
const earthBumpMap = textureLoader.load(
|
|
'https://cdn.jsdelivr.net/gh/mrdoob/three.js/examples/textures/planets/earth_normal_2048.jpg'
|
|
);
|
|
|
|
const earthMaterial = new THREE.MeshPhongMaterial({
|
|
map: earthTexture,
|
|
bumpMap: earthBumpMap,
|
|
bumpScale: 0.1,
|
|
specular: new THREE.Color(0x333333),
|
|
shininess: 5
|
|
});
|
|
|
|
earth = new THREE.Mesh(earthGeometry, earthMaterial);
|
|
earth.receiveShadow = true;
|
|
earth.castShadow = true;
|
|
earthRotationGroup.add(earth);
|
|
|
|
// Set axial tilt (rotate around Z-axis so tilt is correct)
|
|
earthTiltGroup.rotation.z = THREE.MathUtils.degToRad(ASTRONOMICAL_CONSTANTS.OBLIQUITY);
|
|
|
|
// Add atmosphere glow
|
|
const atmosphereGeometry = new THREE.SphereGeometry(ASTRONOMICAL_CONSTANTS.EARTH_RADIUS * 1.03, 64, 64);
|
|
const atmosphereMaterial = new THREE.MeshBasicMaterial({
|
|
color: 0x6699ff,
|
|
transparent: true,
|
|
opacity: 0.15,
|
|
side: THREE.BackSide,
|
|
blending: THREE.AdditiveBlending
|
|
});
|
|
const atmosphere = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial);
|
|
earth.add(atmosphere);
|
|
|
|
// Add axis helper to visualize Earth's rotation axis
|
|
const axisHelper = new THREE.AxesHelper(ASTRONOMICAL_CONSTANTS.EARTH_RADIUS * 2);
|
|
axisHelper.visible = true;
|
|
earthTiltGroup.add(axisHelper);
|
|
}
|
|
|
|
function createEarthOrbit() {
|
|
// Create elliptical orbit path using Kepler's laws
|
|
const orbitPoints = [];
|
|
const segments = 360;
|
|
const a = ASTRONOMICAL_CONSTANTS.SEMI_MAJOR_AXIS / ASTRONOMICAL_CONSTANTS.SCALE_DISTANCE;
|
|
const e = ASTRONOMICAL_CONSTANTS.ECCENTRICITY;
|
|
const b = a * Math.sqrt(1 - e * e); // Semi-minor axis
|
|
|
|
for (let i = 0; i <= segments; i++) {
|
|
const angle = (i / segments) * Math.PI * 2;
|
|
// Ellipse equation in polar coordinates
|
|
const r = (a * (1 - e * e)) / (1 + e * Math.cos(angle));
|
|
const x = r * Math.cos(angle);
|
|
const z = r * Math.sin(angle);
|
|
orbitPoints.push(new THREE.Vector3(x, 0, z));
|
|
}
|
|
|
|
const orbitGeometry = new THREE.BufferGeometry().setFromPoints(orbitPoints);
|
|
const orbitMaterial = new THREE.LineBasicMaterial({
|
|
color: 0x00ff00,
|
|
opacity: 0.3,
|
|
transparent: true
|
|
});
|
|
earthOrbitLine = new THREE.Line(orbitGeometry, orbitMaterial);
|
|
scene.add(earthOrbitLine);
|
|
|
|
// Add perihelion and aphelion markers
|
|
const markerGeometry = new THREE.SphereGeometry(1, 16, 16);
|
|
|
|
// Perihelion (closest to Sun)
|
|
const perihelion = new THREE.Mesh(markerGeometry, new THREE.MeshBasicMaterial({ color: 0xff0000 }));
|
|
perihelion.position.set(a * (1 - e), 0, 0);
|
|
scene.add(perihelion);
|
|
|
|
// Aphelion (farthest from Sun)
|
|
const aphelion = new THREE.Mesh(markerGeometry, new THREE.MeshBasicMaterial({ color: 0x0000ff }));
|
|
aphelion.position.set(-a * (1 + e), 0, 0);
|
|
scene.add(aphelion);
|
|
}
|
|
|
|
function createStarfield() {
|
|
const starsGeometry = new THREE.BufferGeometry();
|
|
const starCount = 8000;
|
|
const positions = new Float32Array(starCount * 3);
|
|
|
|
for (let i = 0; i < starCount * 3; i += 3) {
|
|
const theta = Math.random() * Math.PI * 2;
|
|
const phi = Math.acos(Math.random() * 2 - 1);
|
|
const r = 500 + Math.random() * 500;
|
|
|
|
positions[i] = r * Math.sin(phi) * Math.cos(theta);
|
|
positions[i + 1] = r * Math.sin(phi) * Math.sin(theta);
|
|
positions[i + 2] = r * Math.cos(phi);
|
|
}
|
|
|
|
starsGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
|
|
|
|
const starsMaterial = new THREE.PointsMaterial({
|
|
color: 0xffffff,
|
|
size: 0.7,
|
|
transparent: true,
|
|
opacity: 0.8
|
|
});
|
|
|
|
const stars = new THREE.Points(starsGeometry, starsMaterial);
|
|
scene.add(stars);
|
|
}
|
|
|
|
function setupControls() {
|
|
const datePicker = document.getElementById('date-picker');
|
|
const timeSpeedSlider = document.getElementById('time-speed');
|
|
|
|
// Date picker
|
|
datePicker.addEventListener('change', (e) => {
|
|
if (e.target.value) {
|
|
simulationTime = new Date(e.target.value);
|
|
updateSimulation();
|
|
}
|
|
});
|
|
|
|
// Time speed slider
|
|
timeSpeedSlider.addEventListener('input', (e) => {
|
|
timeSpeed = parseFloat(e.target.value);
|
|
updateSpeedDisplay();
|
|
updateButtonStates();
|
|
});
|
|
|
|
// Buttons
|
|
document.getElementById('btn-reverse').addEventListener('click', () => {
|
|
timeSpeed = -86400; // -1 day per second
|
|
timeSpeedSlider.value = timeSpeed;
|
|
updateSpeedDisplay();
|
|
updateButtonStates();
|
|
});
|
|
|
|
document.getElementById('btn-slower').addEventListener('click', () => {
|
|
if (timeSpeed === 0) {
|
|
timeSpeed = -100;
|
|
} else {
|
|
timeSpeed = timeSpeed / 2;
|
|
}
|
|
if (Math.abs(timeSpeed) < 1) timeSpeed = 0;
|
|
timeSpeedSlider.value = timeSpeed;
|
|
updateSpeedDisplay();
|
|
updateButtonStates();
|
|
});
|
|
|
|
document.getElementById('btn-pause').addEventListener('click', () => {
|
|
timeSpeed = 0;
|
|
timeSpeedSlider.value = 0;
|
|
updateSpeedDisplay();
|
|
updateButtonStates();
|
|
});
|
|
|
|
document.getElementById('btn-faster').addEventListener('click', () => {
|
|
if (timeSpeed === 0) {
|
|
timeSpeed = 100;
|
|
} else {
|
|
timeSpeed = timeSpeed * 2;
|
|
}
|
|
timeSpeed = Math.max(-100000, Math.min(100000, timeSpeed));
|
|
timeSpeedSlider.value = timeSpeed;
|
|
updateSpeedDisplay();
|
|
updateButtonStates();
|
|
});
|
|
|
|
document.getElementById('btn-forward').addEventListener('click', () => {
|
|
timeSpeed = 86400; // +1 day per second
|
|
timeSpeedSlider.value = timeSpeed;
|
|
updateSpeedDisplay();
|
|
updateButtonStates();
|
|
});
|
|
|
|
document.getElementById('btn-realtime').addEventListener('click', () => {
|
|
timeSpeed = 1; // Real-time (1 second per second)
|
|
timeSpeedSlider.value = timeSpeed;
|
|
updateSpeedDisplay();
|
|
updateButtonStates();
|
|
});
|
|
|
|
document.getElementById('btn-reset').addEventListener('click', resetToNow);
|
|
}
|
|
|
|
function updateButtonStates() {
|
|
const buttons = document.querySelectorAll('.button-group button');
|
|
buttons.forEach(btn => btn.classList.remove('active'));
|
|
|
|
if (timeSpeed === 0) {
|
|
document.getElementById('btn-pause').classList.add('active');
|
|
}
|
|
}
|
|
|
|
function resetToNow() {
|
|
simulationTime = new Date();
|
|
timeSpeed = 0;
|
|
document.getElementById('time-speed').value = 0;
|
|
updateSpeedDisplay();
|
|
updateButtonStates();
|
|
updateSimulation();
|
|
}
|
|
|
|
function updateSpeedDisplay() {
|
|
const speedValue = document.getElementById('speed-value');
|
|
if (timeSpeed === 0) {
|
|
speedValue.textContent = 'Paused';
|
|
} else if (Math.abs(timeSpeed) < 2) {
|
|
speedValue.textContent = `${timeSpeed.toFixed(2)}x Real-time`;
|
|
} else if (Math.abs(timeSpeed) < 3600) {
|
|
const seconds = Math.abs(timeSpeed);
|
|
speedValue.textContent = `${timeSpeed < 0 ? '-' : '+'}${seconds.toFixed(0)} sec/sec`;
|
|
} else if (Math.abs(timeSpeed) < 86400) {
|
|
const hours = Math.abs(timeSpeed) / 3600;
|
|
speedValue.textContent = `${timeSpeed < 0 ? '-' : '+'}${hours.toFixed(1)} hours/sec`;
|
|
} else {
|
|
const days = Math.abs(timeSpeed) / 86400;
|
|
speedValue.textContent = `${timeSpeed < 0 ? '-' : '+'}${days.toFixed(1)} days/sec`;
|
|
}
|
|
}
|
|
|
|
function calculateOrbitalPosition(julianDate) {
|
|
// Calculate days since J2000.0 epoch
|
|
const d = julianDate - ASTRONOMICAL_CONSTANTS.J2000;
|
|
|
|
// Mean anomaly (degrees) - represents average angular position
|
|
const M = ASTRONOMICAL_CONSTANTS.MEAN_LONGITUDE +
|
|
(360.0 / ASTRONOMICAL_CONSTANTS.SIDEREAL_YEAR) * d -
|
|
ASTRONOMICAL_CONSTANTS.PERIHELION;
|
|
|
|
// Convert to radians
|
|
const M_rad = THREE.MathUtils.degToRad(M);
|
|
|
|
// Solve Kepler's equation for eccentric anomaly (E)
|
|
// M = E - e·sin(E)
|
|
const e = ASTRONOMICAL_CONSTANTS.ECCENTRICITY;
|
|
let E = M_rad; // Initial guess
|
|
for (let i = 0; i < 10; i++) {
|
|
E = E - (E - e * Math.sin(E) - M_rad) / (1 - e * Math.cos(E));
|
|
}
|
|
|
|
// Calculate true anomaly (v) - actual angular position in orbit
|
|
const v = 2 * Math.atan2(
|
|
Math.sqrt(1 + e) * Math.sin(E / 2),
|
|
Math.sqrt(1 - e) * Math.cos(E / 2)
|
|
);
|
|
|
|
// Distance from sun (km)
|
|
const r = ASTRONOMICAL_CONSTANTS.SEMI_MAJOR_AXIS * (1 - e * Math.cos(E));
|
|
|
|
// Position in orbital plane (scaled for visualization)
|
|
const x = (r / ASTRONOMICAL_CONSTANTS.SCALE_DISTANCE) * Math.cos(v);
|
|
const z = (r / ASTRONOMICAL_CONSTANTS.SCALE_DISTANCE) * Math.sin(v);
|
|
|
|
return { x, z, r, v: THREE.MathUtils.radToDeg(v), d, E };
|
|
}
|
|
|
|
function updateSimulation() {
|
|
// Convert to Julian Date
|
|
const jd = dateToJulianDate(simulationTime);
|
|
|
|
// Calculate orbital position using Kepler's laws
|
|
const orbital = calculateOrbitalPosition(jd);
|
|
|
|
// Update Earth position in orbit
|
|
earthOrbitGroup.position.set(orbital.x, 0, orbital.z);
|
|
|
|
// Calculate Earth rotation (sidereal day - 23h 56m 4s, NOT 24h!)
|
|
const daysSinceJ2000 = jd - ASTRONOMICAL_CONSTANTS.J2000;
|
|
const rotations = daysSinceJ2000 / ASTRONOMICAL_CONSTANTS.SIDEREAL_DAY;
|
|
earthRotationGroup.rotation.y = (rotations % 1) * Math.PI * 2;
|
|
|
|
// Calculate precession (very slow, ~26,000 year cycle)
|
|
// This causes the tilt axis to slowly wobble
|
|
const precessionAngle = (daysSinceJ2000 / (ASTRONOMICAL_CONSTANTS.PRECESSION_PERIOD * 365.25)) * 360;
|
|
|
|
// Update UI with all orbital parameters
|
|
updateUI(jd, orbital, daysSinceJ2000, rotations, precessionAngle);
|
|
|
|
// Update date picker to match simulation time
|
|
const dateString = simulationTime.toISOString().slice(0, 16);
|
|
document.getElementById('date-picker').value = dateString;
|
|
}
|
|
|
|
function updateUI(jd, orbital, daysSinceJ2000, rotations, precessionAngle) {
|
|
// Format date/time
|
|
const options = {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit',
|
|
timeZone: 'UTC'
|
|
};
|
|
document.getElementById('current-time').textContent =
|
|
simulationTime.toLocaleString('en-US', options) + ' UTC';
|
|
|
|
document.getElementById('julian-date').textContent =
|
|
jd.toFixed(2);
|
|
|
|
document.getElementById('days-j2000').textContent =
|
|
daysSinceJ2000.toFixed(2);
|
|
|
|
document.getElementById('rotation-angle').textContent =
|
|
((rotations % 1) * 360).toFixed(2) + '°';
|
|
|
|
document.getElementById('orbital-position').textContent =
|
|
orbital.v.toFixed(2) + '°';
|
|
|
|
document.getElementById('sun-distance').textContent =
|
|
(orbital.r / 1e6).toFixed(3) + ' M km';
|
|
|
|
document.getElementById('precession-angle').textContent =
|
|
(precessionAngle % 360).toFixed(4) + '°';
|
|
|
|
// Calculate orbital velocity using vis-viva equation
|
|
// v = sqrt(GM * (2/r - 1/a))
|
|
const GM = 1.327e20; // Gravitational parameter of Sun (m³/s²)
|
|
const velocity = Math.sqrt(
|
|
GM * (2 / (orbital.r * 1000) - 1 / (ASTRONOMICAL_CONSTANTS.SEMI_MAJOR_AXIS * 1000))
|
|
) / 1000; // Convert to km/s
|
|
|
|
document.getElementById('orbital-velocity').textContent =
|
|
velocity.toFixed(2) + ' km/s';
|
|
|
|
// Determine season (Northern Hemisphere)
|
|
const season = getSeason(orbital.v);
|
|
document.getElementById('season').textContent = season;
|
|
}
|
|
|
|
function getSeason(orbitalAngle) {
|
|
// Seasons based on orbital position
|
|
// Perihelion (~0°) is early January (Northern winter)
|
|
// Adjust angle to align with seasons
|
|
const adjusted = (orbitalAngle + 12) % 360;
|
|
|
|
if (adjusted >= 0 && adjusted < 90) {
|
|
return 'Winter (N) / Summer (S)';
|
|
} else if (adjusted >= 90 && adjusted < 180) {
|
|
return 'Spring (N) / Autumn (S)';
|
|
} else if (adjusted >= 180 && adjusted < 270) {
|
|
return 'Summer (N) / Winter (S)';
|
|
} else {
|
|
return 'Autumn (N) / Spring (S)';
|
|
}
|
|
}
|
|
|
|
function dateToJulianDate(date) {
|
|
// Convert JavaScript Date to Julian Date
|
|
// JD = (Unix timestamp / 86400000) + Julian Date of Unix epoch
|
|
return (date.getTime() / 86400000) + 2440587.5;
|
|
}
|
|
|
|
function onWindowResize() {
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
camera.updateProjectionMatrix();
|
|
renderer.setSize(window.innerWidth, window.innerHeight);
|
|
}
|
|
|
|
function animate() {
|
|
requestAnimationFrame(animate);
|
|
|
|
const currentTime = performance.now();
|
|
const deltaTime = (currentTime - lastFrameTime) / 1000; // seconds
|
|
lastFrameTime = currentTime;
|
|
|
|
// Update simulation time based on speed
|
|
if (timeSpeed !== 0) {
|
|
// timeSpeed is in "simulation seconds per real second"
|
|
const millisecondsToAdd = timeSpeed * deltaTime * 1000;
|
|
simulationTime = new Date(simulationTime.getTime() + millisecondsToAdd);
|
|
updateSimulation();
|
|
}
|
|
|
|
controls.update();
|
|
renderer.render(scene, camera);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|