speed
This commit is contained in:
Flatlogic Bot
parent
1922e61d1c
commit
a4c65b53a6
@ -40,4 +40,42 @@ canvas {
|
||||
#stats-buttons button.active {
|
||||
background-color: #007bff;
|
||||
border-color: #007bff;
|
||||
}
|
||||
|
||||
#controls-container {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
#controls-container button {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
border: 1px solid #555;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#controls-container button:hover {
|
||||
background-color: #555;
|
||||
}
|
||||
|
||||
#time-container {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
color: white;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
font-family: monospace;
|
||||
font-size: 1.2em;
|
||||
z-index: 10;
|
||||
}
|
||||
@ -83,14 +83,14 @@ function createPlanet(radius, textureFile, distance, orbitSpeed) {
|
||||
return { planet, pivot, orbitSpeed, trail, trailPoints };
|
||||
}
|
||||
|
||||
const mercuryData = createPlanet(0.4, 'mercury.jpg', 7, 0.04);
|
||||
const venusData = createPlanet(0.9, 'venus.jpg', 11, 0.015);
|
||||
const earthData = createPlanet(1, 'earth.jpg', 15, 0.01);
|
||||
const marsData = createPlanet(0.7, 'mars.jpg', 20, 0.008);
|
||||
const jupiterData = createPlanet(3, 'jupiter.jpg', 30, 0.004);
|
||||
const saturnData = createPlanet(2.5, 'saturn.jpg', 40, 0.002);
|
||||
const uranusData = createPlanet(2, 'uranus.jpg', 50, 0.001);
|
||||
const neptuneData = createPlanet(1.9, 'neptune.jpg', 60, 0.0005);
|
||||
const mercuryData = createPlanet(0.4, 'mercury.jpg', 7, 0.0297);
|
||||
const venusData = createPlanet(0.9, 'venus.jpg', 11, 0.0116);
|
||||
const earthData = createPlanet(1, 'earth.jpg', 15, 0.00717); // Adjusted for 365-day year
|
||||
const marsData = createPlanet(0.7, 'mars.jpg', 20, 0.0038);
|
||||
const jupiterData = createPlanet(3, 'jupiter.jpg', 30, 0.0006);
|
||||
const saturnData = createPlanet(2.5, 'saturn.jpg', 40, 0.00024);
|
||||
const uranusData = createPlanet(2, 'uranus.jpg', 50, 0.000085);
|
||||
const neptuneData = createPlanet(1.9, 'neptune.jpg', 60, 0.000043);
|
||||
|
||||
// --- Saturn's Rings ---
|
||||
const ringGeometry = new THREE.RingGeometry(3.5, 5, 64);
|
||||
@ -104,6 +104,16 @@ const ring = new THREE.Mesh(ringGeometry, ringMaterial);
|
||||
ring.rotation.x = -Math.PI / 2.5; // Tilt the rings
|
||||
saturnData.planet.add(ring);
|
||||
|
||||
// --- Moon ---
|
||||
const moonGeometry = new THREE.SphereGeometry(0.25, 32, 32);
|
||||
const moonMaterial = new THREE.MeshBasicMaterial({ color: 0x888888 });
|
||||
const moon = new THREE.Mesh(moonGeometry, moonMaterial);
|
||||
|
||||
const moonPivot = new THREE.Object3D();
|
||||
earthData.planet.add(moonPivot);
|
||||
moonPivot.add(moon);
|
||||
moon.position.x = 2;
|
||||
|
||||
|
||||
const planets = [mercuryData, venusData, earthData, marsData, jupiterData, saturnData, uranusData, neptuneData];
|
||||
|
||||
@ -240,32 +250,90 @@ statsButtons.querySelector('button[data-planet="earth"]').classList.add('active'
|
||||
setOutline(earthData.planet); // Initial outline for Earth
|
||||
|
||||
|
||||
// --- Controls Logic ---
|
||||
let isPaused = false;
|
||||
const pauseButton = document.getElementById('pause-button');
|
||||
const speedToggleButton = document.getElementById('speed-toggle-button');
|
||||
|
||||
pauseButton.addEventListener('click', () => {
|
||||
isPaused = !isPaused;
|
||||
pauseButton.textContent = isPaused ? 'Play' : 'Pause';
|
||||
});
|
||||
|
||||
const speeds = [1, 100, 500];
|
||||
let currentSpeedIndex = 0;
|
||||
let timeScale = speeds[currentSpeedIndex]; // Start with 1x speed
|
||||
|
||||
speedToggleButton.addEventListener('click', () => {
|
||||
currentSpeedIndex = (currentSpeedIndex + 1) % speeds.length;
|
||||
timeScale = speeds[currentSpeedIndex];
|
||||
speedToggleButton.textContent = 'Speed: ' + timeScale + 'x';
|
||||
});
|
||||
|
||||
|
||||
// --- Time & Simulation ---
|
||||
const clock = new THREE.Clock();
|
||||
const timeContainer = document.getElementById('time-container');
|
||||
let simulationTime = new Date();
|
||||
const ORBIT_SPEED_MULTIPLIER = 0.1;
|
||||
const TIME_SPEED_FACTOR = 3600; // 1 real second = 1 simulation hour at 1x
|
||||
|
||||
|
||||
function updateTimeDisplay() {
|
||||
const hours = String(simulationTime.getHours()).padStart(2, '0');
|
||||
const minutes = String(simulationTime.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(simulationTime.getSeconds()).padStart(2, '0');
|
||||
const day = String(simulationTime.getDate()).padStart(2, '0');
|
||||
const month = String(simulationTime.getMonth() + 1).padStart(2, '0'); // Month is 0-indexed
|
||||
const year = simulationTime.getFullYear();
|
||||
timeContainer.textContent = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
}
|
||||
|
||||
// Animation loop
|
||||
function animate() {
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
// Get time delta for frame-rate independent animation
|
||||
const delta = clock.getDelta();
|
||||
|
||||
// Update controls
|
||||
controls.update();
|
||||
|
||||
// Rotation
|
||||
sun.rotation.y += 0.001;
|
||||
const maxTrailPoints = 200; // Adjust for longer/shorter trails
|
||||
const worldPosition = new THREE.Vector3();
|
||||
if (!isPaused) {
|
||||
// Advance simulation time using milliseconds for precision
|
||||
const incrementMs = delta * 1000 * timeScale * TIME_SPEED_FACTOR;
|
||||
simulationTime.setTime(simulationTime.getTime() + incrementMs);
|
||||
|
||||
planets.forEach(p => {
|
||||
p.pivot.rotation.y += p.orbitSpeed;
|
||||
p.planet.rotation.y += 0.01; // Add self-rotation
|
||||
// Sun's self-rotation (can be slower and independent of timeScale)
|
||||
sun.rotation.y += 0.005 * delta;
|
||||
|
||||
const maxTrailPoints = 200;
|
||||
const worldPosition = new THREE.Vector3();
|
||||
|
||||
// Update trail
|
||||
p.planet.getWorldPosition(worldPosition);
|
||||
p.trailPoints.push(worldPosition.clone());
|
||||
planets.forEach(p => {
|
||||
// Orbit speed is now correctly scaled by timeScale
|
||||
p.pivot.rotation.y += p.orbitSpeed * ORBIT_SPEED_MULTIPLIER * delta * timeScale;
|
||||
|
||||
// Planet's self-rotation (can also be constant)
|
||||
p.planet.rotation.y += 0.05 * delta;
|
||||
|
||||
if (p.trailPoints.length > maxTrailPoints) {
|
||||
p.trailPoints.shift();
|
||||
}
|
||||
// Update trail
|
||||
p.planet.getWorldPosition(worldPosition);
|
||||
p.trailPoints.push(worldPosition.clone());
|
||||
|
||||
p.trail.geometry.setFromPoints(p.trailPoints);
|
||||
});
|
||||
if (p.trailPoints.length > maxTrailPoints) {
|
||||
p.trailPoints.shift();
|
||||
}
|
||||
|
||||
p.trail.geometry.setFromPoints(p.trailPoints);
|
||||
});
|
||||
|
||||
// Moon's orbit (also scaled by timeScale)
|
||||
moonPivot.rotation.y += 0.1 * ORBIT_SPEED_MULTIPLIER * delta * timeScale;
|
||||
}
|
||||
|
||||
// Update time display every frame
|
||||
updateTimeDisplay();
|
||||
|
||||
renderer.render(scene, camera);
|
||||
}
|
||||
@ -277,4 +345,7 @@ window.addEventListener('resize', () => {
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
});
|
||||
});
|
||||
|
||||
// Initial call to set time
|
||||
updateTimeDisplay();
|
||||
@ -7,6 +7,7 @@
|
||||
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||
</head>
|
||||
<body>
|
||||
<div id="time-container"></div>
|
||||
<div id="stats-container">
|
||||
<div id="stats-buttons">
|
||||
<button data-planet="mercury">Mercury</button>
|
||||
@ -20,6 +21,10 @@
|
||||
</div>
|
||||
<div id="stats-info"></div>
|
||||
</div>
|
||||
<div id="controls-container">
|
||||
<button id="pause-button">Pause</button>
|
||||
<button id="speed-toggle-button">Speed: 1x</button>
|
||||
</div>
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user