karaolidis/studenthack2024-project
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Content commit

Browse Source 
Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
This commit is contained in:
Nick Karaolidis
2024-04-14 10:50:34 +01:00
parent f59d24d4ae
commit 318637019e
87 changed files with 2835 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
js/constructors.js Normal file
View File

@@ -0,0 +1,248 @@
import * as THREE from "three";
export const createCelestialBody = function (data, parent, depth = 0, isLast = false) {
let geometry, material;
const detail = 12;
const loader = new THREE.TextureLoader();
if (data.detail === 2) {
geometry = new THREE.IcosahedronGeometry(data.radius, detail);
material = new THREE.MeshPhongMaterial({
map: loader.load("../assets/celestials/" + data.name + "/map.jpg"),
bumpMap: loader.load("../assets/celestials/" + data.name + "/bump.jpg"),
bumpScale: 10,
});
} else if (data.detail === 1 && data.emissive) {
geometry = new THREE.IcosahedronGeometry(data.radius, detail);
material = new THREE.MeshPhongMaterial({
map: loader.load("../assets/celestials/" + data.name + "/map.jpg"),
emissiveMap: loader.load("../assets/celestials/" + data.name + "/map.jpg"),
emissive: 0xffffff,
});
} else if (data.detail === 1) {
geometry = new THREE.IcosahedronGeometry(data.radius, detail);
material = new THREE.MeshPhongMaterial({
map: loader.load("../assets/celestials/" + data.name + "/map.jpg"),
});
} else {
geometry = new THREE.SphereGeometry(data.radius, 64, 64);
material = new THREE.MeshPhysicalMaterial({
color: data.color,
emissive: data.emissive ? data.emissive.color : null,
});
}
const body = new THREE.Mesh(geometry, material);
// Stars
if (data.emissive) {
const light = new THREE.PointLight(data.emissive.color, data.emissive.intensity, data.emissive.distance, data.emissive.decay);
light.position.set(0, 0, 0);
light.castShadow = true;
body.add(light);
}
body.receiveShadow = true;
if (!data.emissive) {
body.castShadow = true;
}
// Flags
body.isCelestialBody = true;
body.position.set(data.orbitRadius || 0, 0, 0);
body.rotation.x = data.inclination || 0;
body.name = data.name;
body.content = data.content;
body.rotationSpeed = data.rotationSpeed;
body.orbitRadius = data.orbitRadius;
body.orbitSpeed = data.orbitSpeed;
body.orbitInclination = data.orbitInclination;
body.orbitInclinationAngle = data.orbitInclinationAngle;
// Parenting
if (parent) {
body.parent = parent;
parent.add(body);
// Orbit Line
if (data.orbitRadius) {
const points = [];
const colors = [];
const color1 = new THREE.Color(data.color);
const color2 = new THREE.Color(0x000000);
for (let i = 0; i <= 360; i++) {
const radians = (i * Math.PI) / 180;
points.push(new THREE.Vector3(data.orbitRadius * Math.cos(radians), 0, data.orbitRadius * -Math.sin(radians)));
const progress = i / 360;
const interpolation = progress < 0.8 ? progress / 0.8 : 1;
const color = color1.clone().lerp(color2, interpolation);
colors.push(color.r, color.g, color.b);
}
const orbitGeometry = new THREE.BufferGeometry().setFromPoints(points);
orbitGeometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
const orbitMaterial = new THREE.LineBasicMaterial({
vertexColors: true,
linewidth: 2,
transparent: true,
opacity: 0.75,
});
const line = new THREE.LineLoop(orbitGeometry, orbitMaterial);
// Flags
line.isOrbit = true;
if (data.orbitInclination) line.rotation.x = data.orbitInclination;
parent.add(line);
body.orbit = line;
}
}
// Dropdown
const dropdown = document.getElementById("dropdown");
const option = document.createElement("option");
option.value = body.uuid;
let prefix = "";
if (depth > 0) {
prefix = "│ ".repeat(depth - 1) + (isLast ? "└─ " : "├─ ");
}
option.textContent = prefix + data.name;
dropdown.appendChild(option);
// Recursion
if (data.children) {
length = data.children.length;
data.children.forEach((data, index) => {
if (data.type && data.type === "particles") return createCelestialParticles(data, body);
else return createCelestialBody(data, body, depth + 1, index === length - 1);
});
}
return body;
};
export const createCelestialParticles = function (data, parent) {
const colors = [];
for (let i = 0; i < 10; i++) {
const color = new THREE.Color(data.color);
color.offsetHSL(Math.random() * 0.2 - 0.1, Math.random() * 0.2 - 0.1, Math.random() * 0.2 - 0.1);
colors.push(color);
}
const sizeWeights = [0.8, 0.9, 1, 1.1, 1.2];
const particleGroups = Array.from({ length: 5 }, () => ({
points: [],
colors: [],
}));
for (let i = 0; i < data.ringVolume; i++) {
const radius = Math.random() * (data.orbitOuterRadius - data.orbitInnerRadius) + data.orbitInnerRadius;
const angle = Math.random() * Math.PI * 2;
const x = Math.cos(angle) * radius;
const y = Math.random() * data.orbitThickness - data.orbitThickness / 2;
const z = Math.sin(angle) * radius;
const groupIndex = Math.floor(Math.random() * 5);
particleGroups[groupIndex].points.push(new THREE.Vector3(x, y, z));
const color = colors[Math.floor(Math.random() * 10)];
particleGroups[groupIndex].colors.push(color.r, color.g, color.b);
}
const particleSystem = new THREE.Group();
particleGroups.forEach((group, index) => {
const geometry = new THREE.BufferGeometry().setFromPoints(group.points);
geometry.setAttribute("color", new THREE.Float32BufferAttribute(group.colors, 3));
const material = new THREE.PointsMaterial({
size: sizeWeights[index] * data.radius,
sizeAttenuation: true,
vertexColors: true,
transparent: true,
opacity: 0.75,
});
const particles = new THREE.Points(geometry, material);
particleSystem.add(particles);
});
// Flags
particleSystem.isCelestialParticles = true;
if (data.orbitInclination) particleSystem.rotation.x = data.orbitInclination;
if (data.orbitInclinationAngle) particleSystem.rotation.y = data.orbitInclinationAngle;
particleSystem.rotationSpeed = data.orbitSpeed;
// Parenting
if (parent) parent.add(particleSystem);
return particleSystem;
};
export const createStarField = function (
count = 10000,
groups = 5,
innerRadius = 20000,
outerRadius = 25000,
colors = [
{ color: 0xfff8e7, weight: 5 },
{ color: 0xffffff, weight: 3 },
{ color: 0xa5d6ff, weight: 2 },
{ color: 0xffffbf, weight: 2 },
{ color: 0xffd6a5, weight: 2 },
{ color: 0xaaaaff, weight: 1 },
{ color: 0xffa5a5, weight: 1 },
{ color: 0xffa5d6, weight: 1 },
{ color: 0xa5a5ff, weight: 1 },
]
) {
const starGroups = Array.from({ length: groups }, () => ({
points: [],
colors: [],
}));
const totalWeight = colors.reduce((sum, color) => sum + color.weight, 0);
const weightedColors = colors.flatMap((color) => Array(color.weight).fill(color.color));
for (let i = 0; i < count; i++) {
const radius = Math.random() * (outerRadius - innerRadius) + innerRadius;
const theta = Math.random() * Math.PI * 2;
const phi = Math.acos(2 * Math.random() - 1);
const x = radius * Math.sin(phi) * Math.cos(theta);
const y = radius * Math.sin(phi) * Math.sin(theta);
const z = radius * Math.cos(phi);
const groupIndex = Math.floor(Math.random() * groups);
starGroups[groupIndex].points.push(new THREE.Vector3(x, y, z));
const color = new THREE.Color(weightedColors[Math.floor(Math.random() * totalWeight)]);
starGroups[groupIndex].colors.push(color.r, color.g, color.b);
}
const starField = new THREE.Group();
starGroups.forEach((group, index) => {
const geometry = new THREE.BufferGeometry().setFromPoints(group.points);
geometry.setAttribute("color", new THREE.Float32BufferAttribute(group.colors, 3));
const material = new THREE.PointsMaterial({
size: 6 * index,
sizeAttenuation: true,
vertexColors: true,
transparent: true,
opacity: 0.8,
});
const stars = new THREE.Points(geometry, material);
starField.add(stars);
});
return starField;
};

379
js/data.js Normal file
View File

@@ -0,0 +1,379 @@
import { content as callistoContent } from "./data/Callisto.js";
import { content as ceresContent } from "./data/Ceres.js";
import { content as charonContent } from "./data/Charon.js";
import { content as deimosContent } from "./data/Deimos.js";
import { content as earthContent } from "./data/Earth.js";
import { content as europaContent } from "./data/Europa.js";
import { content as ganymedeContent } from "./data/Ganymede.js";
import { content as ioContent } from "./data/Io.js";
import { content as jupiterContent } from "./data/Jupiter.js";
import { content as marsContent } from "./data/Mars.js";
import { content as mercuryContent } from "./data/Mercury.js";
import { content as moonContent } from "./data/Moon.js";
import { content as neptuneContent } from "./data/Neptune.js";
import { content as oberonContent } from "./data/Oberon.js";
import { content as phobosContent } from "./data/Phobos.js";
import { content as plutoContent } from "./data/Pluto.js";
import { content as rheaContent } from "./data/Rhea.js";
import { content as saturnContent } from "./data/Saturn.js";
import { content as sunContent } from "./data/Sun.js";
import { content as titanContent } from "./data/Titan.js";
import { content as titaniaContent } from "./data/Titania.js";
import { content as tritonContent } from "./data/Triton.js";
import { content as umbrielContent } from "./data/Umbriel.js";
import { content as uranusContent } from "./data/Uranus.js";
import { content as venusContent } from "./data/Venus.js";
// All celestials must have the following properties:
// * name: string, unique
// * color: hex
// * radius: number
// * content: string
//
// There are two types of celestials:
// * body (default)
// Body celestials must have the following properties (except for the root celestial):
// * orbitRadius: number
// * orbitSpeed: number
//
// Body celestials may also have the following properties:
// * rotationSpeed: number
// * inclination: number
// * orbitInclination: number
// * children: array of celestials
// * emmisive: object
// The `emissive` property must have the following properties:
// * color: hex
//
// The `emissive` property may also have the following properties:
// * intensity: number
// * distance: number
// * decay: number
//
// * particles
// Particle celestials must have the following properties:
// * orbitInnerRadius: number
// * orbitOuterRadius: number
// * orbitThickness: number
// * ringVolume: number
//
// Particle celestials may also have the following properties:
// * orbitSpeed: number
// * orbitInclination: number
//
// Notes:
// * Entity Speed method: Entity actual speed % 0.001 (for planets, and 0.01 for moon) = Javascript units on "orbitSpeed"
// * Entity Distance from Sun : Entity actual distance from sun in AU * 80 = the value for orbitRadius
export const data = {
name: "Sun",
color: 0xff9966,
emissive: {
color: 0xaaa888,
intensity: 120,
decay: 0.5,
},
detail: 1,
radius: 15,
content: sunContent,
children: [
{
type: "particles",
name: "Asteroid Belt",
color: 0xaaaaaa,
radius: 0.25,
orbitInnerRadius: 260,
orbitOuterRadius: 360,
orbitThickness: 0.1,
ringVolume: 20000,
orbitSpeed: 0.0001,
orbitInclination: 0.185,
orbitInclination: Math.PI,
},
{
type: "particles",
name: "Kuiper Belt",
color: 0xaaaaaa,
radius: 0.5,
orbitInnerRadius: 4800,
orbitOuterRadius: 6800,
orbitThickness: 0.1,
ringVolume: 1000000,
orbitSpeed: 0.00001,
orbitInclination: 0.299,
},
{
name: "Mercury",
color: 0xaaaaaa,
radius: 0.383,
orbitRadius: 39,
orbitSpeed: 0.00479,
orbitInclination: 0.122,
detail: 2,
content: mercuryContent,
},
{
name: "Venus",
color: 0xffcc99,
radius: 0.95,
orbitRadius: 72,
orbitSpeed: 0.0035,
orbitInclination: 0.059,
detail: 2,
content: venusContent,
},
{
name: "Earth",
color: 0x0000ff,
radius: 1,
orbitRadius: 100,
orbitSpeed: 0.00298,
orbitInclination: 0.017,
detail: 2,
content: earthContent,
children: [
{
name: "Moon",
color: 0xaaaaaa,
radius: 0.273,
orbitRadius: 3,
orbitSpeed: 0.0102,
detail: 2,
content: moonContent,
},
],
},
{
name: "Mars",
color: 0xff3300,
radius: 0.532,
orbitRadius: 152,
orbitSpeed: 0.00241,
orbitInclination: 0.032,
detail: 2,
content: marsContent,
children: [
{
name: "Phobos",
color: 0x888888,
radius: 0.1,
orbitRadius: 1.81,
orbitSpeed: 0.0214,
detail: 2,
content: phobosContent,
},
{
name: "Deimos",
color: 0x888888,
radius: 0.08,
orbitRadius: 3.02,
orbitSpeed: 0.0135,
detail: 2,
content: deimosContent,
},
],
},
{
name: "Ceres",
color: 0xe0ffff,
radius: 0.074,
orbitRadius: 270,
orbitSpeed: 0.0179,
orbitInclination: 0.185,
content: ceresContent,
},
{
name: "Jupiter",
color: 0xffc880,
radius: 4.5,
orbitRadius: 520,
orbitSpeed: 0.00131,
orbitInclination: 0.0223,
detail: 1,
content: jupiterContent,
children: [
{
name: "Io",
color: 0xffd700,
radius: 0.3,
orbitRadius: 6.28,
orbitSpeed: 0.1733,
detail: 2,
content: ioContent,
},
{
name: "Europa",
color: 0xfffff0,
radius: 0.25,
orbitRadius: 7.45,
orbitSpeed: 0.1374,
detail: 2,
content: europaContent,
},
{
name: "Ganymede",
color: 0xc2b280,
radius: 0.4,
orbitRadius: 8.72,
orbitSpeed: 0.1088,
detail: 2,
content: ganymedeContent,
},
{
name: "Callisto",
color: 0x778899,
radius: 0.3,
orbitRadius: 9.5,
orbitSpeed: 1.26,
detail: 2,
content: callistoContent,
},
],
},
{
name: "Saturn",
color: 0xffff66,
radius: 5.5,
orbitRadius: 958,
orbitSpeed: 0.0097,
orbitInclination: 0.044,
detail: 1,
content: saturnContent,
children: [
{
type: "particles",
name: "Saturn Ring",
color: 0xaaaaaa,
radius: 0.01,
orbitInnerRadius: 8,
orbitOuterRadius: 11,
orbitThickness: 0.1,
ringVolume: 2200,
orbitSpeed: 0.001,
orbitInclination: Math.PI,
},
{
name: "Titan",
color: 0xf4a460,
radius: 0.4,
orbitRadius: 7.82,
orbitSpeed: 0.0557,
detail: 2,
content: titanContent,
},
{
name: "Rhea",
color: 0xdcdcdc,
radius: 0.21,
orbitRadius: 9.2,
orbitSpeed: 0.0848,
detail: 2,
content: rheaContent,
},
],
},
{
name: "Uranus",
color: 0x66ccff,
radius: 3.9,
orbitRadius: 1922,
orbitSpeed: 0.0068,
orbitInclination: 0.014,
detail: 1,
content: uranusContent,
children: [
{
name: "Titania",
color: 0xc0c0c0,
radius: 0.02,
orbitRadius: 6.9,
orbitSpeed: 0.0364,
detail: 2,
content: titaniaContent,
},
{
name: "Umbriel",
color: 0x696969,
radius: 0.015,
orbitRadius: 7.9,
orbitSpeed: 0.0467,
detail: 2,
content: umbrielContent,
},
{
name: "Oberon",
color: 0xa9a9a9,
radius: 0.018,
orbitRadius: 9.9,
orbitSpeed: 0.0315,
detail: 2,
content: oberonContent,
},
],
},
{
name: "Neptune",
color: 0x6666ff,
radius: 3.8,
orbitRadius: 3005,
orbitSpeed: 0.0054,
orbitInclination: 0.031,
detail: 1,
content: neptuneContent,
children: [
{
name: "Triton",
color: 0xadd8e6,
radius: 0.3,
orbitRadius: 6.24,
orbitSpeed: 0.0439,
detail: 2,
content: tritonContent,
},
],
},
{
name: "Pluto",
color: 0xaaaaaa,
radius: 0.186,
orbitRadius: 3948,
orbitSpeed: 0.0047,
orbitInclination: 0.299,
detail: 1,
content: plutoContent,
children: [
{
name: "Charon",
color: 0x888888,
radius: 0.09,
orbitRadius: 1.9,
orbitSpeed: 0.021,
detail: 2,
content: charonContent,
},
],
},
// Dwarf Planets
{
name: "Makemake",
color: 0xffe4c4,
radius: 0.112,
orbitRadius: 4579,
orbitSpeed: 0.04419,
},
{
name: "Haumea",
color: 0xdec4b0,
radius: 0.128,
orbitRadius: 4313,
orbitSpeed: 0.04484,
},
{
name: "Eris",
color: 0xc0c0c0,
radius: 0.183,
orbitRadius: 6778,
orbitSpeed: 0.0343,
},
],
};

26
js/data/Callisto.js Normal file
View File

@@ -0,0 +1,26 @@
export const content = `
<p>
Callisto is the second-largest moon of Jupiter and the third-largest moon in the Solar System.
Known for its heavily cratered surface, it is the most heavily cratered object in the Solar System.
This suggests a long history of impacts.
</p>
<img src="https://4.bp.blogspot.com/-Zyyh91K02Rg/WIGipjPlwKI/AAAAAAAABK4/57NjPSVDI7ch6JtmL0ghWBXfmVOQTw2hQCLcB/s1600/callisto.jpg"/>
<h2>Key Facts</h2>
<ul>
<li>Orbital Period: About 16.69 days</li>
<li>Diameter: Approximately 4,820 km</li>
<li>Surface: Characterized by a mix of ice and rock</li>
<li>Average Distance from Jupiter: About 1,882,700 km</li>
<li>Orbital Speed: Approximately 8.204 km/s</li>
</ul>
<h2>Surface and Composition</h2>
<p>
Callisto's surface is a mix of ice and rock, with a possible subsurface ocean beneath its icy crust. Its lack of an atmosphere and geological activity implies a very stable surface.
</p>
<h2>Interesting Facts</h2>
<ul>
<li>Callisto is thought to have the lowest density of all the Galilean moons, indicating a high composition of water ice.</li>
<li>Unlike other Galilean moons, Callisto does not experience significant tidal heating, which accounts for its lack of geological activity.</li>
<li>Callisto is considered a prime candidate for future space missions due to its relatively low radiation levels compared to other Jovian moons.</li>
</ul>
`;

25
js/data/Ceres.js Normal file
View File

@@ -0,0 +1,25 @@
export const content = `
<p>
Ceres is the largest object in the asteroid belt between Mars and Jupiter and is classified as a dwarf planet.
Discovered in 1801 by Giuseppe Piazzi, Ceres was originally considered a planet and later reclassified as an asteroid before being designated as a dwarf planet in 2006.
</p>
<img src="https://cdn.mos.cms.futurecdn.net/7yojSnrjnEZHoXtA2XLHxF.jpg"/>
<h2>Key Facts</h2>
<ul>
<li>Orbital Period: About 4.6 Earth years</li>
<li>Diameter: Approximately 940 km</li>
<li>Surface: Characterized by craters, plains, and possibly cryovolcanoes</li>
<li>Average Distance from the Sun: About 413 million km</li>
<li>Orbital Speed: Approximately 17.882 km/s</li>
</ul>
<h2>Atmosphere</h2>
<p>
Ceres has a very thin atmosphere (exosphere), which contains water vapor and other volatiles. Observations suggest that water vapor may be ejected into space from ice volcanoes or subsurface ice layers.
</p>
<h2>Interesting Facts</h2>
<ul>
<li>Ceres is named after the Roman goddess of agriculture and fertility.</li>
<li>The dwarf planet is believed to have a rocky core and an icy mantle, and it may harbor an internal ocean.</li>
<li>Ceres' surface features include the famous bright spots in the Occator Crater, believed to be deposits of sodium carbonate or other salts.</li>
</ul>
`;

24
js/data/Charon.js Normal file
View File

@@ -0,0 +1,24 @@
export const content = `
<p>
Charon is the largest moon of the dwarf planet Pluto and was discovered in 1978 by James Christy. It is a significant body in the Kuiper belt and is notable for being almost half the size of Pluto itself, making the Pluto-Charon system more of a binary dwarf planet system.
</p>
<img src="https://www.sciencealert.com/images/2016-09/charon-body.jpg"/>
<h2>Key Facts</h2>
<ul>
<li>Orbital Period: 6.387 days (synchronously orbits with Pluto)</li>
<li>Diameter: Approximately 1,212 km</li>
<li>Surface: Icy with varied terrain, including canyons and plains</li>
<li>Average Distance from Pluto: About 17,536 km</li>
<li>Gravity: 0.288 m/s² (about 1/12th of Earth's)</li>
</ul>
<h2>Surface and Geology</h2>
<p>
Charon's surface is mostly composed of water ice with some ammonia hydrates. It has a young surface geologically, with fewer craters than expected, suggesting recent geological activity.
</p>
<h2>Interesting Facts</h2>
<ul>
<li>Charon and Pluto are tidally locked, always showing the same face to each other.</li>
<li>The reddish north pole of Charon, informally named Mordor Macula, is thought to be stained by tholin-like organic molecules escaping Pluto’s atmosphere.</li>
<li>Charon has a dark belt near its equator and smoother plains in the north, indicating a complex geological history.</li>
</ul>
`;

25
js/data/Deimos.js Normal file
View File

@@ -0,0 +1,25 @@
export const content = `
<p>
Deimos is one of the two moons of Mars and is the smaller and outermost of the two. It orbits Mars at a much greater distance than its larger sibling, Phobos.
Deimos is irregularly shaped and has a surface that is heavily cratered, reflecting its history of impacts.
</p>
<img src="https://img2.wikia.nocookie.net/__cb20121010154526/space/images/7/7a/Deimos.jpg"/>
<h2>Key Facts</h2>
<ul>
<li>Orbital Period: About 30.3 hours</li>
<li>Diameter: Approximately 12.4 km on its longest axis</li>
<li>Surface Features: Characterized by a smooth, dusty surface with craters and ridges</li>
<li>Average Distance from Mars: About 23,460 km</li>
<li>Orbital Speed: Approximately 1.35 km/s</li>
</ul>
<h2>Atmosphere</h2>
<p>
Deimos does not have a significant atmosphere; its gravitational pull is too weak to retain any substantial atmosphere, resulting in a near-vacuum environment.
</p>
<h2>Interesting Facts</h2>
<ul>
<li>Deimos is named after the Greek god of terror, a fitting name for a moon that silently orbits the Red Planet.</li>
<li>Due to its small size and distant orbit, Deimos takes longer to orbit Mars than Phobos, which is the fastest orbiting natural satellite in the solar system.</li>
<li>Its surface is less grooved and smoother compared to Phobos, suggesting a different bombardment history or surface composition.</li>
</ul>
`;

25
js/data/Earth.js Normal file
View File

@@ -0,0 +1,25 @@
export const content = `
<p>
Earth is the third planet from the Sun and the only astronomical object known to harbor life.
With a vast amount of liquid water and an atmosphere that contains oxygen, Earth supports a diverse range of life forms.
</p>
<img src="https://assets.wired.com/photos/w_1534/wp-content/uploads/2014/12/2014bluemarble_2014089_lrg.jpg"/>
<h2>Key Facts</h2>
<ul>
<li>Orbital Period: 365.25 days</li>
<li>Diameter: Approximately 12,742 km</li>
<li>Climate: Supports a wide range of climates from arctic cold to desert heat</li>
<li>Average Distance from the Sun: About 149.6 million km (1 AU)</li>
<li>Orbital Speed: Approximately 29.78 km/s</li>
</ul>
<h2>Atmosphere</h2>
<p>
Earth's atmosphere is composed of 78% nitrogen and 21% oxygen, with traces of argon, carbon dioxide, and other gases. This unique composition supports and protects life.
</p>
<h2>Interesting Facts</h2>
<ul>
<li>Earth's rotation is gradually slowing, which lengthens our days very slightly over long periods.</li>
<li>The concept of Earth as the center of the universe was a long-held belief until proven otherwise by astronomers like Copernicus.</li>
<li>70% of Earth's surface is covered in water. Yet, humanity has explored less than 5% of the world's oceans, making them largely mysterious.</li>
</ul>
`;

25
js/data/Europa.js Normal file
View File

@@ -0,0 +1,25 @@
export const content = `
<p>
Europa is one of the four largest moons of Jupiter and is slightly smaller than Earth's Moon.
It is notable for its smooth, icy surface and the strong evidence suggesting a subsurface ocean beneath its ice crust.
</p>
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/5bbf31e9-4cc9-4661-b911-745c7e208934/d3grgf4-3638daa3-ee6d-43a7-9d2e-970c2ca9746f.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwic3ViIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsImF1ZCI6WyJ1cm46c2VydmljZTpmaWxlLmRvd25sb2FkIl0sIm9iaiI6W1t7InBhdGgiOiIvZi81YmJmMzFlOS00Y2M5LTQ2NjEtYjkxMS03NDVjN2UyMDg5MzQvZDNncmdmNC0zNjM4ZGFhMy1lZTZkLTQzYTctOWQyZS05NzBjMmNhOTc0NmYuanBnIn1dXX0.mzFo5tAtxni48_Ql60GU11SAAhcN9iJWLCkMihQqFDs"/>
<h2>Key Facts</h2>
<ul>
<li>Orbital Period: 3.55 Earth days</li>
<li>Diameter: Approximately 3,122 km</li>
<li>Surface: Characterized mostly by ice with a very thin atmosphere</li>
<li>Average Distance from Jupiter: About 671,000 km</li>
<li>Orbital Speed: Approximately 13.74 km/s</li>
</ul>
<h2>Atmosphere</h2>
<p>
Europa's atmosphere is extremely thin, primarily composed of oxygen, though it is far too thin to support human life.
</p>
<h2>Interesting Facts</h2>
<ul>
<li>Europa's icy surface is crisscrossed by a series of cracks and striations, which are thought to be caused by the tidal flexing exerted by Jupiter.</li>
<li>The presence of a subsurface ocean under its icy crust makes it a likely candidate for harboring extraterrestrial life.</li>
<li>Despite its cold environment, the interaction between Europa's ocean and rocky mantle could create the potential for life-supporting environments.</li>
</ul>
`;

26
js/data/Ganymede.js Normal file
View File

@@ -0,0 +1,26 @@
export const content = `
<p>
Ganymede is the largest moon of Jupiter and the largest in the solar system. It is the only moon known to have its own magnetic field.
Despite its cold, icy surface, there is evidence suggesting that Ganymede has subsurface oceans that could contain more water than all of Earth's surface water combined.
</p>
<img src="https://www.universetoday.com/wp-content/uploads/2020/08/Moon_Ganymede_by_NOAA.jpg"/>
<h2>Key Facts</h2>
<ul>
<li>Orbital Period: 7.15 days</li>
<li>Diameter: Approximately 5,268 km</li>
<li>Climate: Predominantly icy with a thin oxygen atmosphere</li>
<li>Average Distance from Jupiter: About 1,070,000 km</li>
<li>Orbital Speed: Approximately 10.88 km/s</li>
</ul>
<h2>Atmosphere</h2>
<p>
Ganymede's atmosphere is primarily composed of oxygen, albeit extremely thin and not breathable.
The presence of an intrinsic magnetic field and aurorae suggest a complex electromagnetic environment.
</p>
<h2>Interesting Facts</h2>
<ul>
<li>Ganymede is the only moon in the solar system known to possess a significant magnetic field.</li>
<li>It is larger than the planet Mercury, although it has only about half its mass.</li>
<li>Scientists believe that Ganymede's internal ocean could contain more than twice the water found on Earth, hidden under a thick crust of ice.</li>
</ul>
`;

24
js/data/Io.js Normal file
View File

@@ -0,0 +1,24 @@
export const content = `
<p>
Io is one of Jupiter's moons and the fourth largest moon in the solar system. Known for its extreme geological activity, Io is the most volcanically active body in the solar system, with hundreds of volcanoes, some erupting lava fountains up to 500 kilometers high.
</p>
<img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fannesastronomynews.com%2Fwp-content%2Fuploads%2F2012%2F02%2FJupiters-vulcanic-moon-Io.-Recent-analysis-of-data-reveals-a-subsurface-ocean-of-molten-or-partially-molten-magma-beneath-the-surface.jpg&f=1&nofb=1&ipt=298646367ee0a822e20207a79c5fb20350380a47042a5b3d2f7841c989c6848e"/>
<h2>Key Facts</h2>
<ul>
<li>Orbital Period: 1.77 Earth days</li>
<li>Diameter: Approximately 3,643 km</li>
<li>Surface: Dominated by sulfur and sulfur dioxide frost</li>
<li>Average Distance from Jupiter: About 421,700 km</li>
<li>Orbital Speed: Approximately 17.334 km/s</li>
</ul>
<h2>Atmosphere</h2>
<p>
Io's thin atmosphere is primarily composed of sulfur dioxide (SO<sub>2</sub>), with minor components of other gases such as sulfur monoxide and sodium chloride.
</p>
<h2>Interesting Facts</h2>
<ul>
<li>Io's orbit is slightly eccentric, which, along with gravitational interactions with Jupiter, causes intense tidal heating.</li>
<li>The intense geological activity reshapes Io's surface rapidly, erasing impact craters and continually forming new mountains and lava flows.</li>
<li>Despite its hostile environment, Io plays a crucial role in shaping Jupiter's magnetosphere through its volcanic plumes and atmosphere.</li>
</ul>
`;

24
js/data/Jupiter.js Normal file
View File

@@ -0,0 +1,24 @@
export const content = `
<p>
Jupiter is the fifth planet from the Sun and the largest in our solar system. Known for its immense size and strong magnetic field, Jupiter is predominantly composed of hydrogen and helium.
</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/5/5a/Jupiter_by_Cassini-Huygens.jpg"/>
<h2>Key Facts</h2>
<ul>
<li>Orbital Period: 4,333 days (about 11.86 Earth years)</li>
<li>Diameter: Approximately 139,820 km</li>
<li>Climate: Lacks a solid surface, has a thick atmosphere with violent storms</li>
<li>Average Distance from the Sun: About 778 million km (5.2 AU)</li>
<li>Orbital Speed: Approximately 13.07 km/s</li>
</ul>
<h2>Atmosphere</h2>
<p>
Jupiter's atmosphere is the largest planetary atmosphere in the solar system, composed mostly of hydrogen and helium, with clouds of ammonia crystals, and possibly water ice and vapor.
</p>
<h2>Interesting Facts</h2>
<ul>
<li>Jupiter's Great Red Spot is a giant storm larger than Earth that has been raging for at least 350 years.</li>
<li>The planet has a faint ring system and over 79 known moons, including the four large Galilean moons discovered by Galileo in 1610.</li>
<li>Jupiter's powerful magnetosphere extends up to 7 million kilometers toward the Sun and almost reaches Saturn's orbit on the other side.</li>
</ul>
`;

24
js/data/Mars.js Normal file
View File

@@ -0,0 +1,24 @@
export const content = `
<p>
Mars is the fourth planet from the Sun and the second smallest planet in the solar system. Known for its red color, Mars has a thin atmosphere and surface features reminiscent both of Earth's deserts and its polar ice caps.
</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/5/58/Mars_23_aug_2003_hubble.jpg"/>
<h2>Key Facts</h2>
<ul>
<li>Orbital Period: 687 Earth days</li>
<li>Diameter: Approximately 6,779 km</li>
<li>Climate: Mostly cold with dusty winds; temperatures can range from -125 to 20 degrees Celsius</li>
<li>Average Distance from the Sun: About 227.9 million km</li>
<li>Orbital Speed: Approximately 24.07 km/s</li>
</ul>
<h2>Atmosphere</h2>
<p>
Mars's atmosphere is composed mainly of carbon dioxide (95.32%), with nitrogen (2.7%) and argon (1.6%), and traces of oxygen and water vapor. Its atmospheric pressure is low, less than 1% of Earth's.
</p>
<h2>Interesting Facts</h2>
<ul>
<li>Mars is home to the tallest volcano in the solar system, Olympus Mons, which is nearly three times the height of Mount Everest.</li>
<li>Despite its harsh conditions, Mars is a target for human colonization and has been extensively explored by robotic missions like rovers and orbiters.</li>
<li>The presence of water ice has been confirmed on Mars, indicating potential for past or present life forms under its surface.</li>
</ul>
`;

25
js/data/Mercury.js Normal file
View File

@@ -0,0 +1,25 @@
export const content = `
<p>
Mercury is the closest planet to the Sun and the smallest in our solar system.
Known for its extreme temperature fluctuations and cratered surface, Mercury does not have an atmosphere capable of supporting life as we know it.
</p>
<img src="https://www.universetoday.com/wp-content/uploads/2014/12/Mercury-Messenger-enhanced-color.jpg"/>
<h2>Key Facts</h2>
<ul>
<li>Orbital Period: 88 Earth days</li>
<li>Diameter: Approximately 4,880 km</li>
<li>Climate: Extreme temperatures ranging from -173 °C during the night to 427 °C during the day</li>
<li>Average Distance from the Sun: About 57.91 million km</li>
<li>Orbital Speed: Approximately 47.87 km/s</li>
</ul>
<h2>Atmosphere</h2>
<p>
Mercury's exosphere is composed mainly of oxygen, sodium, hydrogen, helium, and potassium. It is too thin to support a stable atmosphere and protect the planet from cosmic rays and solar wind.
</p>
<h2>Interesting Facts</h2>
<ul>
<li>Mercury has no moons or rings.</li>
<li>Due to its slow rotation and fast orbital speed, a day on Mercury (from sunrise to sunrise) lasts about 176 Earth days.</li>
<li>Mercury's surface experiences the greatest temperature variation of the planets in our solar system due to its lack of atmosphere.</li>
</ul>
`;

25
js/data/Moon.js Normal file
View File

@@ -0,0 +1,25 @@
export const content = `
<p>
The Moon is Earth's only natural satellite and the fifth largest moon in the Solar System.
Known for its impact on Earth's tides and lack of atmosphere, the Moon has a surface marked by craters and basaltic plains.
</p>
<img src="https://www.virtualtelescope.eu/wordpress/wp-content/uploads/2014/03/moon_16mar2014_stretched.jpg"/>
<h2>Key Facts</h2>
<ul>
<li>Orbital Period: About 27.3 days (sidereal period)</li>
<li>Diameter: Approximately 3,474 km</li>
<li>Surface: Features highlands, maria, and numerous impact craters</li>
<li>Average Distance from Earth: About 384,400 km</li>
<li>Gravity: About 1/6th that of Earth's</li>
</ul>
<h2>Surface and Composition</h2>
<p>
The Moon's surface is mostly covered in regolith, a fine rocky dust, with large areas of basaltic plains called maria created by ancient volcanic eruptions.
</p>
<h2>Interesting Facts</h2>
<ul>
<li>The Moon is slowly moving away from Earth, approximately 3.8 cm per year.</li>
<li>The same side of the Moon always faces Earth due to synchronous rotation.</li>
<li>Humanity's first visit to another celestial body was the Apollo 11 mission, which landed on the Moon on July 20, 1969.</li>
</ul>
`;

24
js/data/Neptune.js Normal file
View File

@@ -0,0 +1,24 @@
export const content = `
<p>
Neptune is the eighth planet from the Sun and the most distant in our solar system. Known for its beautiful blue color, Neptune is a gas giant primarily made up of hydrogen and helium with traces of water, ammonia, and methane.
</p>
<img src="https://www.rmg.co.uk/sites/default/files/Neptune_Full.jpg"/>
<h2>Key Facts</h2>
<ul>
<li>Orbital Period: About 164.8 Earth years</li>
<li>Diameter: Approximately 49,244 km</li>
<li>Climate: Extremely cold with strong wind speeds</li>
<li>Average Distance from the Sun: About 4.5 billion km (30.1 AU)</li>
<li>Orbital Speed: Approximately 5.43 km/s</li>
</ul>
<h2>Atmosphere</h2>
<p>
Neptune's atmosphere is marked by extremely dynamic weather patterns and the fastest planetary winds in the solar system, with speeds reaching up to 2,100 km/h. The atmosphere consists mostly of hydrogen, helium, water, and methane, the latter of which gives the planet its striking blue hue.
</p>
<h2>Interesting Facts</h2>
<ul>
<li>Neptune was the first planet located through mathematical predictions rather than through regular observation.</li>
<li>It has a very thin collection of rings, not nearly as prominent as those of Saturn.</li>
<li>Neptune has 14 known moons with Triton being the largest and geologically active, with geysers of nitrogen ice.</li>
</ul>
`;

26
js/data/Oberon.js Normal file
View File

@@ -0,0 +1,26 @@
export const content = `
<p>
Oberon is the outermost major moon of the planet Uranus and the second largest of Uranus's moons.
Discovered by William Herschel in 1787, Oberon is composed primarily of ice and rock, and it has a highly cratered surface.
</p>
<img src="https://solarsystem.nasa.gov/system/content_pages/main_images/262_Oberon_732.jpg"/>
<h2>Key Facts</h2>
<ul>
<li>Orbital Period: About 13.46 Earth days</li>
<li>Diameter: Approximately 1,522 km</li>
<li>Climate: Extremely cold with a surface temperature averaging about -203°C</li>
<li>Average Distance from Uranus: About 583,500 km</li>
<li>Orbital Speed: Approximately 3.15 km/s</li>
</ul>
<h2>Surface and Composition</h2>
<p>
Oberon's surface is marked by many impact craters and old, icy plains. Its largest known crater, Hamlet, has a diameter of about 206 km.
The moon's icy exterior likely covers a rocky core, which may contain a small amount of water ice.
</p>
<h2>Interesting Facts</h2>
<ul>
<li>Oberon is named after the king of the fairies in Shakespeare's "A Midsummer Night's Dream".</li>
<li>The surface features of Oberon are named after characters and places from Shakespearean works and the works of Alexander Pope.</li>
<li>Due to its distant orbit and cold temperature, Oberon remains one of the least understood major moons in the Solar System.</li>
</ul>
`;

24
js/data/Phobos.js Normal file
View File

@@ -0,0 +1,24 @@
export const content = `
<p>
Phobos is one of the two moons orbiting Mars, being the larger and closer of the two. Despite its proximity, Phobos is destined to meet a dramatic end, as it is gradually spiraling inward towards Mars.
</p>
<img src="https://planetary.s3.amazonaws.com/image/PSP_007769_9010_IRB_180.jpg"/>
<h2>Key Facts</h2>
<ul>
<li>Orbital Period: About 7.66 hours</li>
<li>Diameter: Approximately 22.4 km</li>
<li>Surface: Features numerous craters and grooves</li>
<li>Average Distance from Mars: About 9,376 km</li>
<li>Orbital Speed: Approximately 2.14 km/s</li>
</ul>
<h2>Surface Features</h2>
<p>
Phobos is marked by a stark, barren landscape dominated by the massive Stickney crater, along with a network of grooves and ridges that suggest geological activity or tidal forces at work.
</p>
<h2>Interesting Facts</h2>
<ul>
<li>Phobos is one of the darkest bodies in the solar system, reflecting only about 7% of the sunlight that hits it.</li>
<li>Its orbit is so close to Mars that it orbits the planet faster than Mars rotates; from the Martian surface, Phobos can be seen rising in the west and setting in the east.</li>
<li>Due to tidal forces, it is estimated that Phobos will be pulled apart or crash into Mars in about 30 to 50 million years.</li>
</ul>
`;

25
js/data/Pluto.js Normal file
View File

@@ -0,0 +1,25 @@
export const content = `
<p>
Pluto, once considered the ninth planet from the Sun, is now classified as a dwarf planet in the Kuiper Belt.
Known for its icy surface and unusual orbit, Pluto remains a subject of fascination and study in astronomy.
</p>
<img src="https://petapixel.com/assets/uploads/2015/09/plutohigh-res.jpg"/>
<h2>Key Facts</h2>
<ul>
<li>Orbital Period: 248 Earth years</li>
<li>Diameter: Approximately 2,377 km</li>
<li>Climate: Extremely cold, with temperatures near -229°C</li>
<li>Average Distance from the Sun: About 5.9 billion km (39.5 AU)</li>
<li>Orbital Speed: Approximately 4.74 km/s</li>
</ul>
<h2>Atmosphere</h2>
<p>
Pluto's thin atmosphere consists primarily of nitrogen, with traces of methane and carbon monoxide. During its orbit, this atmosphere expands when closer to the Sun and freezes when farther away.
</p>
<h2>Interesting Facts</h2>
<ul>
<li>Pluto was reclassified from a planet to a dwarf planet in 2006 by the International Astronomical Union.</li>
<li>It has five known moons, with Charon being the largest. Charon is so large that Pluto and Charon are sometimes considered a binary system.</li>
<li>Pluto's surface features plains, mountains made of water ice, and a heart-shaped glacier called Tombaugh Regio.</li>
</ul>
`;

25
js/data/Rhea.js Normal file
View File

@@ -0,0 +1,25 @@
export const content = `
<p>
Rhea is the second largest moon of Saturn and the ninth largest moon in the solar system.
With a heavily cratered surface and a very thin atmosphere, Rhea presents a stark contrast to the Earth-like conditions we know.
</p>
<img src="https://solarsystem.nasa.gov/system/content_pages/main_images/805_PIA12648.jpg"/>
<h2>Key Facts</h2>
<ul>
<li>Orbital Period: 4.518 days</li>
<li>Diameter: Approximately 1,527 km</li>
<li>Climate: Lacks a substantial atmosphere, leading to extreme temperature variations</li>
<li>Average Distance from Saturn: About 527,000 km</li>
<li>Orbital Speed: Approximately 8.48 km/s</li>
</ul>
<h2>Atmosphere</h2>
<p>
Rhea's atmosphere is extremely tenuous, primarily composed of oxygen and carbon dioxide, but far too thin to support life as we know it.
</p>
<h2>Interesting Facts</h2>
<ul>
<li>Rhea may have a faint ring system, making it the only moon known to potentially possess rings.</li>
<li>Despite its solid ice surface, Rhea's weak atmosphere suggests it has no significant geological activity.</li>
<li>Rhea's surface features include craters and bright wispy streaks, believed to be ice cliffs created by tectonic fractures.</li>
</ul>
`;

25
js/data/Saturn.js Normal file
View File

@@ -0,0 +1,25 @@
export const content = `
<p>
Saturn is the sixth planet from the Sun and the second-largest in our solar system, renowned for its extensive ring system.
Known for its beautiful rings composed of ice, rock, and dust, Saturn stands out among the other planets.
</p>
<img src="https://nssdc.gsfc.nasa.gov/planetary/image/saturn.jpg"/>
<h2>Key Facts</h2>
<ul>
<li>Orbital Period: About 29.5 Earth years</li>
<li>Diameter: Approximately 116,460 km</li>
<li>Climate: Predominantly cold with strong winds and storms</li>
<li>Average Distance from the Sun: About 1.4 billion km (9.5 AU)</li>
<li>Orbital Speed: Approximately 9.69 km/s</li>
</ul>
<h2>Atmosphere</h2>
<p>
Saturn's atmosphere is primarily composed of hydrogen and helium, with traces of methane, water vapor, and ammonia. The planet's famous yellow and gold bands are due to the ammonia crystals in its upper atmosphere.
</p>
<h2>Interesting Facts</h2>
<ul>
<li>Saturn has the most extensive system of rings in our solar system, which are made visible by reflected sunlight.</li>
<li>Saturn has at least 83 moons, with Titan being the largest and having a substantial atmosphere.</li>
<li>The planet's density is so low that it would float if placed in a sufficiently large body of water.</li>
</ul>
`;

25
js/data/Sun.js Normal file
View File

@@ -0,0 +1,25 @@
export const content = `
<p>
The Sun is the star at the center of the Solar System and is by far the most important source of energy for life on Earth.
Its immense gravity holds the solar system together, and its light and heat have been the main drivers of the planet's climate and weather.
</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b4/The_Sun_by_the_Atmospheric_Imaging_Assembly_of_NASA's_Solar_Dynamics_Observatory_-_20100819.jpg"/>
<h2>Key Facts</h2>
<ul>
<li>Type: G-type main-sequence star (G2V)</li>
<li>Diameter: Approximately 1,391,000 km</li>
<li>Core Temperature: About 15 million degrees Celsius</li>
<li>Average Distance from Earth: About 149.6 million km (1 AU)</li>
<li>Surface Temperature: Approximately 5,500 degrees Celsius</li>
</ul>
<h2>Composition</h2>
<p>
The Sun is primarily composed of hydrogen (about 74%) and helium (about 24%), with the remainder made up of heavier elements like oxygen, carbon, and iron.
</p>
<h2>Interesting Facts</h2>
<ul>
<li>The Sun's magnetic field is very strong and variable, a phenomenon that is visible as sunspots on the surface and drives solar activity like solar flares.</li>
<li>Every eleven years, the Sun's magnetic field undergoes a reversal, which affects the intensity and number of sunspots.</li>
<li>The Sun is about 4.6 billion years old and has enough nuclear fuel to stay as it is for another 5 billion years.</li>
</ul>
`;

25
js/data/Titan.js Normal file
View File

@@ -0,0 +1,25 @@
export const content = `
<p>
Titan is the largest moon of Saturn and the second-largest natural satellite in the Solar System.
It is known for its dense atmosphere and the presence of stable bodies of surface liquid, unique among the solar system's moons.
</p>
<img src="https://curious-droid.com/wp-content/uploads/2018/04/titan-1024x576.jpg"/>
<h2>Key Facts</h2>
<ul>
<li>Orbital Period: 15.94 Earth days</li>
<li>Diameter: Approximately 5,150 km</li>
<li>Climate: Has a thick atmosphere; primarily nitrogen with methane and ethane clouds and rain</li>
<li>Average Distance from Saturn: About 1.2 million km</li>
<li>Surface Temperature: Approximately -179 degrees Celsius</li>
</ul>
<h2>Atmosphere</h2>
<p>
Titan's atmosphere is composed primarily of nitrogen (95%) with small amounts of methane and other hydrocarbons. This thick atmosphere is more substantial than that of any other moon in the Solar System and is the only nitrogen-rich dense atmosphere on a moon.
</p>
<h2>Interesting Facts</h2>
<ul>
<li>Titan has rivers, lakes, and seas of liquid methane and ethane, making its surface one of the most Earth-like places in the Solar System in terms of geology.</li>
<li>Despite its low temperatures, Titan's atmosphere allows for the formation of complex organic molecules, leading some scientists to speculate about possible microbial life.</li>
<li>The thick haze of Titan's atmosphere obscures its surface features from visible light observations, but radar and infrared measurements have penetrated the haze, revealing an intricate and active geology.</li>
</ul>
`;

24
js/data/Titania.js Normal file
View File

@@ -0,0 +1,24 @@
export const content = `
<p>
Titania is the largest moon of Uranus and the eighth largest moon in the solar system. Discovered by William Herschel in 1787, Titania is notable for its mix of craters and widespread canyons indicating geological activity.
</p>
<img src="https://astronoo.com/images/lunes/titania-lune-d-uranus.jpg"/>
<h2>Key Facts</h2>
<ul>
<li>Orbital Period: 8.7 days</li>
<li>Diameter: Approximately 1,578 km</li>
<li>Climate: Extremely cold with a surface temperature around -184 degrees Celsius</li>
<li>Average Distance from Uranus: About 436,000 km</li>
<li>Orbital Speed: Approximately 3.64 km/s</li>
</ul>
<h2>Surface and Composition</h2>
<p>
Titania's surface is composed of water ice mixed with a dark material, creating a slightly reddish hue. The moon's surface is marked by large faults and canyons, some of which are up to 1500 kilometers long and several kilometers deep.
</p>
<h2>Interesting Facts</h2>
<ul>
<li>Titania features a massive canyon named Messina Chasma, which is over 1500 km long.</li>
<li>Despite its cold environment, Titania may possess a subsurface ocean beneath its icy crust.</li>
<li>The moon's relatively smooth surface suggests geological activity in its past, possibly including cryovolcanism.</li>
</ul>
`;

26
js/data/Triton.js Normal file
View File

@@ -0,0 +1,26 @@
export const content = `
<p>
Triton is the largest moon of Neptune and is one of the few geologically active moons in the solar system.
It features a surface covered mostly by frozen nitrogen with water ice, carbon dioxide ice, and a rocky core.
</p>
<img src="https://d1jqu7g1y74ds1.cloudfront.net/wp-content/uploads/2010/07/Detail-of-Tritons-Surface.jpg"/>
<h2>Key Facts</h2>
<ul>
<li>Orbital Period: 5.877 days</li>
<li>Diameter: Approximately 2,706 km</li>
<li>Climate: Extremely cold, with surface temperatures around -235 degrees Celsius</li>
<li>Average Distance from Neptune: About 354,800 km</li>
<li>Orbital Speed: Approximately 4.39 km/s</li>
</ul>
<h2>Atmosphere</h2>
<p>
Triton has a tenuous atmosphere composed mainly of nitrogen with small amounts of methane near the surface.
This thin atmosphere can support transient clouds and even a type of 'snow' made from nitrogen.
</p>
<h2>Interesting Facts</h2>
<ul>
<li>Triton orbits Neptune in a retrograde direction, which is opposite to most other moons in the solar system.</li>
<li>It is believed that Triton was captured by Neptune's gravity and is not an original satellite of the planet.</li>
<li>Triton's geysers can eject particles up to 8 km above its surface, suggesting internal geologic activity.</li>
</ul>
`;

24
js/data/Umbriel.js Normal file
View File

@@ -0,0 +1,24 @@
export const content = `
<p>
Umbriel is a moon of Uranus and the third most massive of the Uranian moons. Discovered on October 24, 1851, by William Lassell, it is one of the darker moons of Uranus, with a low reflectivity indicating a surface covered in carbonaceous material.
</p>
<img src="https://www.universetoday.com/wp-content/uploads/2010/02/Umbriel_usgsx2-580x580.jpg"/>
<h2>Key Facts</h2>
<ul>
<li>Orbital Period: About 4.1 Earth days</li>
<li>Diameter: Approximately 1,170 km</li>
<li>Surface: Characterized by heavily cratered terrain, ancient and dark</li>
<li>Average Distance from Uranus: About 266,000 km</li>
<li>Orbital Speed: Approximately 4.67 km/s</li>
</ul>
<h2>Surface and Composition</h2>
<p>
Umbriel's surface is marked by numerous impact craters and has a much darker and older surface compared to other moons. It appears to be composed primarily of water ice with a significant amount of darker, rocky material.
</p>
<h2>Interesting Facts</h2>
<ul>
<li>Umbriel is named after a character in Alexander Pope’s poem "The Rape of the Lock."</li>
<li>This moon remains one of the least understood in the Uranian system, with no dedicated missions to study it up close.</li>
<li>The largest crater on Umbriel, Wunda, has a mysterious bright ring of material on its floor, which contrasts sharply with the rest of the moon's dark surface.</li>
</ul>
`;

25
js/data/Uranus.js Normal file
View File

@@ -0,0 +1,25 @@
export const content = `
<p>
Uranus is the seventh planet from the Sun and is known for its unique tilt of approximately 98 degrees, making it almost perpendicular to the ecliptic plane.
This tilt results in extreme seasons during its long orbit around the Sun.
</p>
<img src="https://listverse.com/wp-content/uploads/2007/08/uranus-1.jpg"/>
<h2>Key Facts</h2>
<ul>
<li>Orbital Period: 84 Earth years</li>
<li>Diameter: Approximately 50,724 km</li>
<li>Climate: Features an extremely cold atmosphere with minimal seasonal variation at most latitudes</li>
<li>Average Distance from the Sun: About 2.87 billion km (19.19 AU)</li>
<li>Orbital Speed: Approximately 6.81 km/s</li>
</ul>
<h2>Atmosphere</h2>
<p>
Uranus's atmosphere is primarily composed of hydrogen (83%) and helium (15%), with traces of water, ammonia, and methane that give it a pale blue color.
</p>
<h2>Interesting Facts</h2>
<ul>
<li>Uranus has 27 known moons, all named after characters from the works of William Shakespeare and Alexander Pope.</li>
<li>Uranus was the first planet discovered with a telescope, spotted by William Herschel in 1781.</li>
<li>The planet's extreme axial tilt is likely due to a collision with an Earth-sized object long ago, drastically affecting its rotation.</li>
</ul>
`;

25
js/data/Venus.js Normal file
View File

@@ -0,0 +1,25 @@
export const content = `
<p>
Venus is the second planet from the Sun and is often called Earth's "sister planet" due to their similar size, mass, and proximity to the Sun.
Known for its harsh conditions, Venus has a thick, toxic atmosphere primarily composed of carbon dioxide, with clouds of sulfuric acid, making it inhospitable for life as we know it.
</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/8/85/Venus_globe.jpg"/>
<h2>Key Facts</h2>
<ul>
<li>Orbital Period: 224.7 days</li>
<li>Diameter: Approximately 12,104 km</li>
<li>Climate: Extremely hot with a surface temperature of about 462°C (864°F)</li>
<li>Average Distance from the Sun: About 108 million km (0.72 AU)</li>
<li>Orbital Speed: Approximately 35.02 km/s</li>
</ul>
<h2>Atmosphere</h2>
<p>
Venus has an incredibly dense atmosphere, with a pressure 92 times that of Earth's. This atmosphere consists mostly of carbon dioxide with clouds of sulfuric acid, contributing to the extreme greenhouse effect and high surface temperatures.
</p>
<h2>Interesting Facts</h2>
<ul>
<li>Venus rotates in the opposite direction to most planets in our solar system, which means on Venus the Sun rises in the west and sets in the east.</li>
<li>Venus is the hottest planet in our solar system, despite being second from the Sun, due to its dense atmosphere.</li>
<li>Venus does not have any moons, a rare characteristic among the solar system's planets.</li>
</ul>
`;

305
js/main.js Normal file
View File

@@ -0,0 +1,305 @@
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { data } from "./data.js";
import { createCelestialBody, createStarField } from "./constructors.js";
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
import { OutputPass } from "three/addons/postprocessing/OutputPass.js";
const main = function () {
// Scene Setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100000);
camera.position.y = 120;
camera.position.z = 150;
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
const composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
const outputPass = new OutputPass();
composer.addPass(outputPass);
// Basic Controls
const cameraDamping = 0.05;
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = cameraDamping;
controls.minDistance = 5;
controls.maxDistance = 6000;
// Responsive Design
const onWindowResize = function () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
};
window.addEventListener("resize", onWindowResize, false);
// Objects
const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);
const sun = createCelestialBody(data, undefined, 0);
let selectedPlanet = sun;
let hasFocused = false;
scene.add(sun);
const starField = createStarField();
scene.add(starField);
// Movement
const movement = {
forward: false,
backward: false,
left: false,
right: false,
};
const velocity = 0.5;
const onKeyDown = function (event) {
switch (event.code) {
case "KeyW":
movement.forward = true;
break;
case "KeyS":
movement.backward = true;
break;
case "KeyA":
movement.left = true;
break;
case "KeyD":
movement.right = true;
break;
}
};
const onKeyUp = function (event) {
switch (event.code) {
case "KeyW":
movement.forward = false;
break;
case "KeyS":
movement.backward = false;
break;
case "KeyA":
movement.left = false;
break;
case "KeyD":
movement.right = false;
break;
}
};
document.addEventListener("keydown", onKeyDown);
document.addEventListener("keyup", onKeyUp);
// Selection
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
const updateInfoBox = function () {
const infoWindow = document.getElementById("infoWindow");
if (!selectedPlanet || !selectedPlanet.content) {
infoWindow.style.display = "none";
return;
}
const infoTitle = document.getElementById("infoTitle");
const infoContent = document.getElementById("infoContent");
infoTitle.innerText = selectedPlanet.name;
infoContent.innerHTML = selectedPlanet.content;
infoWindow.style.display = "block";
};
const updateDropdown = function () {
const dropdown = document.getElementById("dropdown");
selectedPlanet ? (dropdown.value = selectedPlanet.uuid) : (dropdown.value = "");
};
const onRightClick = function (event) {
event.preventDefault();
selectedPlanet = undefined;
hasFocused = false;
updateDropdown();
updateInfoBox();
};
document.addEventListener("contextmenu", onRightClick);
const onDoubleLeftClick = function (event) {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(scene.children, true).filter((intersect) => intersect.object.isCelestialBody);
if (intersects.length === 0) return;
selectedPlanet = intersects[0].object;
hasFocused = false;
updateDropdown();
updateInfoBox();
};
document.addEventListener("dblclick", onDoubleLeftClick);
const onDropdownChange = function (event) {
selectedPlanet = event.target.value ? scene.getObjectByProperty("uuid", event.target.value) : undefined;
hasFocused = false;
updateInfoBox();
};
document.getElementById("dropdown").addEventListener("change", onDropdownChange);
// `Music
const music = [
"assets/music/track1.mp3",
"assets/music/track2.mp3",
"assets/music/track3.mp3",
"assets/music/track4.mp3",
"assets/music/track5.mp3",
"assets/music/track6.mp3",
"assets/music/track7.mp3",
];
let currentMusicIndex = 0;
const player = document.getElementById("backgroundMusic");
const playNextTrack = function () {
if (currentMusicIndex === music.length - 1) currentMusicIndex = 0;
player.src = music[currentMusicIndex];
player.play();
currentMusicIndex++;
};
player.addEventListener("ended", playNextTrack);
playNextTrack();
// Animation
let simulationSpeed = 1;
const onSimulationSpeedChange = function (event) {
simulationSpeed = parseFloat(event.target.value);
document.getElementById("speedValue").textContent = simulationSpeed;
};
document.getElementById("speedSlider").addEventListener("input", onSimulationSpeedChange);
const updateCelestial = function (celestial) {
const time = Date.now() * 0.0001 * simulationSpeed;
const angle = time * celestial.orbitSpeed;
// Orbit
if (celestial.orbitRadius) {
celestial.position.x = celestial.orbitRadius * Math.cos(angle);
celestial.position.z = celestial.orbitRadius * Math.sin(angle) * Math.cos(celestial.orbitInclination || 0);
celestial.position.y = celestial.orbitRadius * Math.sin(angle) * -Math.sin(celestial.orbitInclination || 0);
celestial.orbit.rotation.y = -angle;
}
// Rotation
if (celestial.rotationSpeed) celestial.rotation.y += celestial.rotationSpeed;
// Recursion
if (celestial.children) {
celestial.children.forEach((child) => {
if (child.isCelestialBody || child.isCelestialParticles) updateCelestial(child);
});
}
};
const animate = function () {
requestAnimationFrame(animate);
// Celestial Movement
let startingPosition = selectedPlanet ? selectedPlanet.getWorldPosition(new THREE.Vector3()) : undefined;
updateCelestial(sun, undefined);
let endingPosition = selectedPlanet ? selectedPlanet.getWorldPosition(new THREE.Vector3()) : undefined;
// Camera Movement
let direction = new THREE.Vector3();
camera.getWorldDirection(direction);
let forward = direction.multiplyScalar(velocity);
let right = new THREE.Vector3().crossVectors(camera.up, direction).normalize().multiplyScalar(velocity);
if (movement.forward) camera.position.add(forward);
if (movement.backward) camera.position.sub(forward);
if (movement.left) camera.position.sub(right);
if (movement.right) camera.position.add(right);
// Camera Focus
if (selectedPlanet && camera.position.distanceTo(selectedPlanet.getWorldPosition(new THREE.Vector3())) > 10000) {
hasFocused = false;
}
if (selectedPlanet) {
const target = selectedPlanet.getWorldPosition(new THREE.Vector3());
let cameraTarget;
if (selectedPlanet.name === "Sun") {
cameraTarget = new THREE.Vector3(0, 30, 60);
} else {
const parent = selectedPlanet.parent;
const parentPosition = parent.getWorldPosition(new THREE.Vector3());
const planetPosition = selectedPlanet.getWorldPosition(new THREE.Vector3());
let direction;
if (parent.name === "Sun") {
direction = new THREE.Vector3().subVectors(parentPosition, planetPosition).normalize();
} else {
direction = new THREE.Vector3().subVectors(planetPosition, parentPosition).normalize();
}
cameraTarget = new THREE.Vector3().copy(planetPosition).add(direction.multiplyScalar(60)).add(new THREE.Vector3(0, 30, 0));
}
if (controls.target.distanceTo(target) < 1 && camera.position.distanceTo(cameraTarget) < 100) {
hasFocused = true;
}
if (hasFocused) {
const delta = new THREE.Vector3().subVectors(endingPosition, startingPosition);
camera.position.add(delta);
controls.target.add(delta);
} else {
if (simulationSpeed < 30) {
camera.position.lerp(cameraTarget, cameraDamping * simulationSpeed);
controls.target.lerp(target, cameraDamping * simulationSpeed);
} else {
camera.position.copy(cameraTarget);
controls.target.copy(target);
hasFocused = true;
}
}
}
// Camera Limits
if (camera.position.x > 10000) camera.position.x = 10000;
if (camera.position.x < -10000) camera.position.x = -10000;
if (camera.position.y > 10000) camera.position.y = 10000;
if (camera.position.y < -10000) camera.position.y = -10000;
if (camera.position.z > 10000) camera.position.z = 10000;
if (camera.position.z < -10000) camera.position.z = -10000;
// Render
controls.update();
composer.render();
};
animate();
};
main();