,
+ document.body
);
};
diff --git a/src/components/Help/HelpContent.md b/src/components/Help/HelpContent.md
index 78b8f22..2f1eb9e 100644
--- a/src/components/Help/HelpContent.md
+++ b/src/components/Help/HelpContent.md
@@ -1,73 +1,97 @@
-# 💫 Welcome to The TYCHOSIUM
+# Welcome to The TYCHOSIUM
-The TYCHOSIUM is an interactive 3D simulation of the **TYCHOS model** of our solar system. It allows you to visualize celestial mechanics from a unique binary system perspective, where Earth serves as the reference point.
+The Tychosium is an interactive 3D simulator of the TYCHOS model of our solar system. It allows you to visualize the intricate orbital mechanics of our nearby celestial bodies, trace their paths over time, generate Epemerides (lists of planetary positions), discover and examine astronomical events such as conjunctions and oppositions, elcipses, etc.
----
+## Features
-## ☼ Navigation & Viewing
-
-### **Orbit View (Default)**
-Move freely around the solar system.
-- **Rotate:** Left-click + Drag
-- **Zoom:** Mouse Wheel / Scroll
-- **Pan:** Right-click + Drag
-- **Focus:** Double-click on any object to center the camera on it
-- **Context Menu:** Right-click an object to see more options
-
-### 🌍 **Planet Camera (Surface View)**
-Experience the sky from the surface of Earth or other celestial bodies.
-1. Open the **Controls** menu (top right).
-2. Check **"Planet camera"**.
-3. Use the **Planet Camera** panel to:
- - **Select Body:** Switch between Earth, Moon, Mars, Mercury, Venus, or Sun.
- - **Jump to Location:** Use the **Location** dropdown to instantly visit cities (e.g., *Rome, Stockholm, Tokyo*).
- - **Manual Position:** Adjust **Latitude**, **Longitude**, and **Height** manually.
- - **Look Around:** Drag the mouse to rotate your viewing angle and direction.
+- **All planets of the Solar system** arranged in the TYCHOS model configuration in an actual Euclidian space. The simulation also includes Halleys comet and Eros.
+- **9000+ stars** with Right Ascension, Declination, Magnitude and Color temperature.
+- **Search** All stars, planets, comets and asteroids can be searched and tracked.
+- **Accurate scale and distances** Whith `Actual planet` sizes checked all celectial bodies are to scale and at correct relative distances. In the `Stars & Helpers` menu, the Star distances can be adjusted. Default is `42633` - the reduction factor suggested in the TYCHOS model, but if set to `1` the official star distances are used. When `Celstial sphere` is checked, the stars are projected at a uniform distance that can be adjusted with `Sphere & Zodiac size`
+- **Planet camera** When selecting `Planet camera` the camera is attched to Earth, with numerous location presets and its also possible to view the universe from other planets.
+- **Trace** Planetary motion and retogrades can be visualized.
+- **Constellations and Zodiac wheels** In the `Stars & Helpers` the H.A. Reys beatiful way to draw constellation can be turned on, plus the tropical and sidereal zodiac and the Equinoxes to study the Precession of the Equinoxes.
+- **Perpetual calendar** The simulation allows for pratically and date and accunts for the Julian calendar and supports Julian astronomical dates.
---
-## ⏱ Time Controls
+## Basic Navigation
+
+- **Rotate Camera:** Left-Click + Drag
+- **Zoom:** Mouse Scroll Wheel
+- **Change camera target:** Double click on a planet
+- **Hoover any planet or star** to see its current position
+
+---
-Control the flow of time to observe planetary motions over centuries or days.
+## Time & Main Controls (Top Right Menu)
- - **Reset:** Return to the simulation start date (2000-01-01).
- - **Today:** Instantly jump to the current real-world date.
-- **Play/Pause:** Start/Stop the simulation (Key: `Space`).
-- **Step Forward/Back:** Move time by the selected increment (Day, Month, Year).
-- **Date:** Enter a Gregorian date (YYYY-MM-DD).
-- **Time:** Enter a UTC time.
-- **Julian Day:** Enter a scientific Julian Day number.
-- **1 sec/step equals:** Adjust how fast time passes when playing. Negative numbers run the simulation in reverse.
-- **Increment:** Adjust what 1 sec/step (and multiplier) equals (second, minute, hour...).
+The primary panel controls the flow of time in the simulator.
+- **Question mark** Shows this window.
+- **Stripes and X** Hides/Shows the main menu.
+- **Reset:** Restores the simulator to the default start date (2000-06-21).
+- **Today:** Sets todays date.
+- **Playback Controls:** - **Play/Pause (▶ / ⏸):** Starts or stops the progression of time.
+ - **Step Back / Step Forward (⏮ / ⏭):** Click to step one unit of time, or click and hold to move through time continuously.
+- **Date, Time (UTC), & Julian Day:** Manually enter specific dates or times. Press `Enter` to instantly jump to that exact moment.
---
-## 🔭 Stars & Search
+## Speed Controls
-- **Star Data:** Hover your mouse over any star to reveal its Name, HR Number, Magnitude, and Color Index.
-- **Search:** Use the search bar (top left) to find stars by:
- - **Name** (e.g., "Sirius", "Polaris")
- - **HR Number** (e.g., "HR 123")
-- **Highlight:** Selected stars are marked with a crosshair for easy tracking.
+- **1 sec/step equals:** Sets the multiplier for time progression. You can use `Up/Down` on your keyboard to add/remove 1 increments. Negative numbers causes the simulation to move backwards.
+- **Time Unit (Dropdown):** Choose the unit of time for each step/second (e.g., Seconds, Hours, Days, Solar Years, Sidereal Years).
----
+## Main Menu
-## 🛠️ Visual Settings & Tools
+Directly below the time controls is the main menu, divided into expandable sections.
-Use the **Controls Panel** (top right) to customize your view:
+### Controls
-### **Visibility**
-- **Planets:** Show/hide specific planets or the Moon.
-- **Orbits:** Toggle orbital paths to see the geometry of the system.
-- **Labels:** Toggle text labels for planets and major stars.
+Toggles for primary viewing modes and control panels.
-### **Helpers**
-- **Celestial Sphere:** Show the grid of Right Ascension and Declination.
-- **Ecliptic Grid:** Visualize the plane of the solar system.
-- **Zodiac:** Display the zodiacal band for astrological reference.
-- **Trace:** Enable **Orbital Tracing** to draw the geometric path of a planet over time (Spirograph effect).
+- **Actual planet sizes:** Toggles between visually scaled-up planets and their true, realistic scale.
+- **Planet camera:** Activates the Planet camera.
+- **Camera follow:** Locks the camera to follow the planet that is camera target.
+- **Labels:** Shows or hides the names of planets and stars.
+- **Orbits:** Toggles the visibility of planetary orbit lines.
+- **Search:** Opens the **Search** tool to find and track specific stars or planets.
+- **Positions:** Opens a live data panel showing the Right Ascension (RA), Declination (Dec), Distance, and Elongation of the planets.
+- **Ephemerides:** Opens the Ephemerides generator that calculate historical or future planetary data over custom date ranges.
----
+### Trace
+
+Tool for drawing the paths that planets take through space over time.
+
+**Note:** To trace the Sun you need to set the 1 sec/step equals to 100 years or higher, since the trace shows the Suns motion during a great year
+
+- **Trace On/Off:** Enables tracing.
+- **Line width & Dotted line:** Customizes the appearance of the trace lines.
+- **Trace length:** Determines how far back in time the trace tail extends.
+- **Step length:** Adjusts the resolution/smoothness of the generated trace.
+- **Planets:** Select which planets that should be traced.
+
+### Planets & Orbits
+
+Adjust the visual representation of the solar system.
+
+- **Planet sizes:** Slider to manually scale up planets for better visibility.
+- **Orbits linewidth:** Adjusts the thickness of the orbit paths.
+- **Arrows:** Shows directional arrows on the orbital paths.
+- **Polar lines:** Toggles the visibility of polar axis lines on the Earth and the Sun.
+- **Graticules:** Toggles a spherical coordinate grid over the Earth and the Sun.
+- **Edit settings:** Opens advanced developer options for modifying object parameters.
+- **Planets:** Select which planets, moons, comets and asteroids to view.
+
+### Stars & Helpers
+
+Controls the fixed stars, consellation visibility and Equinox and Zodiac markers.
-[**Learn more about the TYCHOS model at tychos.space →**](https://www.tychos.space)
\ No newline at end of file
+- **Stars:** Toggles the visibility of the background starfield (Bright Star Catalogue).
+- **Divide distances by:** Pulls the stars closer/further without changing their coordinate positions.
+- **Celestial sphere:** Projects all stars onto a uniform sphere at an equidistant radius.
+- **Constellations:** Draws H.A. Reys classical constellations.
+- **Equinoxes & Solistices:** Marks the Equinoxes and Solistices.
+- **Sidereal Zodiac / Tropical Zodiac:** Displays the respective zodiacs around the solar system.
+- **Sphere & Zodiac size:** Scales the radius of the celestial sphere, the constellations and helpers..
diff --git a/src/components/Helpers/CelestialSphere.jsx b/src/components/Helpers/CelestialSphere.jsx
index 1acd4ae..98f6a60 100644
--- a/src/components/Helpers/CelestialSphere.jsx
+++ b/src/components/Helpers/CelestialSphere.jsx
@@ -10,7 +10,8 @@ function CelestialSphere() {
const meshRef = useRef();
const wireframeRef = useRef();
- const size = (celestialSphereSize * hScale) / 100;
+ // Apply a 2/3 scaling factor to make it one-third smaller
+ const size = ((celestialSphereSize * hScale) / 100) * (2 / 3);
// Recreate PolarGridHelper whenever celestialSphereSize changes
const polarGrid = useMemo(
diff --git a/src/components/Helpers/EclipticGrid.jsx b/src/components/Helpers/EclipticGrid.jsx
index ab47473..d4a8f56 100644
--- a/src/components/Helpers/EclipticGrid.jsx
+++ b/src/components/Helpers/EclipticGrid.jsx
@@ -11,19 +11,29 @@ export default function EclipticGrid() {
const gridGroup = useMemo(() => {
const group = new THREE.Group();
- // Create the main grid helper
- const grid = new THREE.GridHelper(2, 30, "#008800", "#000088");
- group.add(grid);
+ // Create only the green lines for the X and Z axes
+ const points = [
+ new THREE.Vector3(-1, 0, 0), // X-axis start
+ new THREE.Vector3(1, 0, 0), // X-axis end
+ new THREE.Vector3(0, 0, -1), // Z-axis start
+ new THREE.Vector3(0, 0, 1), // Z-axis end
+ ];
+
+ const geometry = new THREE.BufferGeometry().setFromPoints(points);
+ const material = new THREE.LineBasicMaterial({ color: "#008800" });
+ const greenLines = new THREE.LineSegments(geometry, material);
+
+ group.add(greenLines);
return group;
- }, [eclipticGridSize]);
+ }, []); // eclipticGridSize removed from dependency array as it's not used inside useMemo
if (!eclipticGrid) return null;
const size = (eclipticGridSize * hScale) / 100;
return (
-
+
{/* Seasonal Markers */}
diff --git a/src/components/Helpers/TropicalZodiac.jsx b/src/components/Helpers/TropicalZodiac.jsx
new file mode 100644
index 0000000..909ed97
--- /dev/null
+++ b/src/components/Helpers/TropicalZodiac.jsx
@@ -0,0 +1,150 @@
+import { useMemo } from "react";
+import * as THREE from "three";
+import { CanvasTexture, DoubleSide } from "three";
+import getCircularText from "../../utils/getCircularText";
+import { useStore } from "../../store";
+
+function ZodiacGrid() {
+ const geometry = useMemo(() => {
+ const points = [];
+ const radius = 260;
+ const radials = 12;
+ const divisions = 64;
+
+ // 12 Visible Spokes
+ for (let i = 0; i < radials; i++) {
+ const angle = (i / radials) * Math.PI * 2;
+ const x = Math.cos(angle) * radius;
+ const z = Math.sin(angle) * radius;
+ points.push(new THREE.Vector3(0, 0, 0));
+ points.push(new THREE.Vector3(x, 0, z));
+ }
+
+ // Outer Circle
+ for (let i = 0; i < divisions; i++) {
+ const t1 = (i / divisions) * Math.PI * 2;
+ const t2 = ((i + 1) / divisions) * Math.PI * 2;
+ points.push(
+ new THREE.Vector3(Math.cos(t1) * radius, 0, Math.sin(t1) * radius)
+ );
+ points.push(
+ new THREE.Vector3(Math.cos(t2) * radius, 0, Math.sin(t2) * radius)
+ );
+ }
+
+ return new THREE.BufferGeometry().setFromPoints(points);
+ }, []);
+
+ return (
+
+
+
+ );
+}
+
+function ZodiacLabels() {
+ const names =
+ " GEMINI" +
+ " TAURUS" +
+ " ARIES" +
+ " PISCES" +
+ " AQUARIUS" +
+ " CAPRICORN" +
+ " SAGITTARIUS" +
+ " SCORPIO" +
+ " LIBRA" +
+ " VIRGO" +
+ " LEO" +
+ " CANCER";
+ const text1 = getCircularText(
+ names,
+ 800,
+ 0,
+ "right",
+ false,
+ true,
+ "Arial",
+ "18pt",
+ 2
+ );
+ const texture1 = new CanvasTexture(text1);
+
+ const symbols =
+ " ♊" +
+ " ♉" +
+ " ♈" +
+ " ♓" +
+ " ♒" +
+ " ♑" +
+ " ♐" +
+ " ♏" +
+ " ♎" +
+ " ♍" +
+ " ♌" +
+ " ♋";
+ const text2 = getCircularText(
+ symbols,
+ 800,
+ 0,
+ "right",
+ false,
+ true,
+ "Segoe UI Symbol",
+ "18pt",
+ 2
+ );
+ const texture2 = new CanvasTexture(text2);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default function TropicalZodiac() {
+ const tropicalZodiac = useStore((s) => s.tropicalZodiac);
+ const zodiacSize = 100;
+ const hScale = useStore((s) => s.hScale);
+ const size = (zodiacSize * hScale) / 100;
+
+ // CALIBRATION: Adjust this if Aries doesn't align with the Vernal Equinox vector
+ // -1.57 is -90 degrees (standard 3 o'clock start offset)
+ const ROTATION_OFFSET = -Math.PI / 2;
+
+ return (
+ <>
+ {tropicalZodiac && (
+
+
+
+
+ )}
+
+ );
+}
diff --git a/src/components/Helpers/Zodiac.jsx b/src/components/Helpers/Zodiac.jsx
index dc35677..7ae3cfd 100644
--- a/src/components/Helpers/Zodiac.jsx
+++ b/src/components/Helpers/Zodiac.jsx
@@ -1,6 +1,51 @@
+import { useMemo } from "react"; // Added useMemo
+import * as THREE from "three"; // Import THREE for Vector3 and BufferGeometry
import { CanvasTexture, DoubleSide } from "three";
import getCircularText from "../../utils/getCircularText";
import { useStore } from "../../store";
+
+// New component to replace PolarGridHelper
+function ZodiacGrid() {
+ const geometry = useMemo(() => {
+ const points = [];
+ const radius = 260; // Matches original args[0]
+ const radials = 12; // Changed from 24 to 12 (Only visible spokes)
+ const divisions = 64; // Matches original args[3] (Circle smoothness)
+
+ // 1. Generate the 12 visible spokes
+ for (let i = 0; i < radials; i++) {
+ const angle = (i / radials) * Math.PI * 2;
+ const x = Math.cos(angle) * radius;
+ const z = Math.sin(angle) * radius;
+
+ // Line from center (0,0,0) to outer edge
+ points.push(new THREE.Vector3(0, 0, 0));
+ points.push(new THREE.Vector3(x, 0, z));
+ }
+
+ // 2. Generate the outer circle
+ for (let i = 0; i < divisions; i++) {
+ const t1 = (i / divisions) * Math.PI * 2;
+ const t2 = ((i + 1) / divisions) * Math.PI * 2;
+
+ points.push(
+ new THREE.Vector3(Math.cos(t1) * radius, 0, Math.sin(t1) * radius)
+ );
+ points.push(
+ new THREE.Vector3(Math.cos(t2) * radius, 0, Math.sin(t2) * radius)
+ );
+ }
+
+ return new THREE.BufferGeometry().setFromPoints(points);
+ }, []);
+
+ return (
+
+ {/* Only the visible grey color */}
+
+ );
+}
+
function ZodiacLabels() {
const names =
" GEMINI" +
@@ -89,11 +134,12 @@ export default function Zodiac() {
<>
{zodiac && (
-
+ {/* Replaced polarGridHelper with custom ZodiacGrid */}
+
)}
diff --git a/src/components/HoverObj/HoverObj.jsx b/src/components/HoverObj/HoverObj.jsx
index 1150eea..cbdaf2e 100644
--- a/src/components/HoverObj/HoverObj.jsx
+++ b/src/components/HoverObj/HoverObj.jsx
@@ -1,32 +1,65 @@
-import { useRef, useState } from "react";
-import {SpriteMaterial} from "three";
-import { useStore } from "../../store";
-import HoverPanel from "./HoverPanel"; // Relative import
-import createCircleTexture from "../../utils/createCircleTexture"; // Adjust path if utils/ is elsewhere
+import { useRef, useState, useMemo, useEffect } from "react";
+// Remove SpriteMaterial import, we will use the JSX element
+import { useStore } from "../../store";
+import HoverPanel from "./HoverPanel";
+import createCircleTexture from "../../utils/createCircleTexture";
+import { useThree } from "@react-three/fiber"; // 1. Import useThree
-const HoverObj = ({ s, starColor=false }) => {
+const HoverObj = ({ s, starColor = false }) => {
const [hovered, setHover] = useState(false);
const [contextMenu, setContextMenu] = useState(false);
+
+ // Selectors
const hoveredObjectId = useStore((state) => state.hoveredObjectId);
const setHoveredObjectId = useStore((state) => state.setHoveredObjectId);
const setCameraTarget = useStore((state) => state.setCameraTarget);
+ const setSearchTarget = useStore((state) => state.setSearchTarget);
+ const runIntro = useStore((state) => state.runIntro); // Get runIntro state
+ const planetCamera = useStore((state) => state.planetCamera); // Get planetCamera state
+
+ const { gl } = useThree(); // Get gl to access domElement
+ const mouseDownRef = useRef(false); // Track mouse state
+
const timeoutRef = useRef(null);
- const color = !starColor ? s.color : starColor
- const circleTexture = createCircleTexture(color);
- const spriteMaterial = new SpriteMaterial({
- map: circleTexture,
- transparent: true,
- opacity: hovered ? 0.09 : 0.05,
- sizeAttenuation: false,
- // depthTest: false,
- });
+ const color = !starColor ? s.color : starColor;
+
+ // FIX 1: Only create the texture ONCE when the color changes.
+ const circleTexture = useMemo(() => {
+ return createCircleTexture(color);
+ }, [color]);
+
+ // Setup mouse listeners to track dragging
+ useEffect(() => {
+ const canvas = gl.domElement;
+
+ const onMouseDown = () => {
+ mouseDownRef.current = true;
+ };
+ const onMouseUp = () => {
+ mouseDownRef.current = false;
+ };
+
+ canvas.addEventListener("mousedown", onMouseDown);
+ canvas.addEventListener("mouseup", onMouseUp);
+
+ return () => {
+ canvas.removeEventListener("mousedown", onMouseDown);
+ canvas.removeEventListener("mouseup", onMouseUp);
+ };
+ }, [gl]);
const handlePointerOver = () => {
+ // Abort if intro is running OR mouse is held down (dragging)
+ if (runIntro || mouseDownRef.current) return;
+
if (timeoutRef.current) clearTimeout(timeoutRef.current);
timeoutRef.current = setTimeout(() => {
- setHover(true);
- setHoveredObjectId(s.name);
+ // Double check state before activating
+ if (!mouseDownRef.current && !runIntro) {
+ setHover(true);
+ setHoveredObjectId(s.name);
+ }
}, 200);
};
@@ -34,7 +67,12 @@ const HoverObj = ({ s, starColor=false }) => {
if (timeoutRef.current) clearTimeout(timeoutRef.current);
setHover(false);
if (!contextMenu) {
- setHoveredObjectId(null);
+ // Only clear if WE are the one currently hovered
+ // (This prevents clearing if the user moved quickly to another object)
+ // Although purely based on this component, we can just check our local state
+ if (hoveredObjectId === s.name) {
+ setHoveredObjectId(null);
+ }
}
};
@@ -43,16 +81,31 @@ const HoverObj = ({ s, starColor=false }) => {
return (
setCameraTarget(s.name)}
+ onDoubleClick={() => {
+ if (planetCamera) {
+ setSearchTarget(s.name);
+ } else {
+ setCameraTarget(s.name);
+ }
+ }}
onContextMenu={() => {
if (showPanel) setContextMenu(true);
}}
renderOrder={1}
>
+ {/* FIX 2: Use declarative instead of 'new SpriteMaterial()' */}
+ {/* This allows R3F to update the opacity without destroying/recreating the material */}
+
+
{
const [pinned, setPinned] = useState(false);
const setCameraTarget = useStore((state) => state.setCameraTarget);
const setHoveredObjectId = useStore((state) => state.setHoveredObjectId);
+ const planetCamera = useStore((state) => state.planetCamera); // Get planetCamera state
const groupRef = useRef(null);
@@ -58,9 +59,9 @@ const HoverPanel = ({ hovered, contextMenu, setContextMenu, s }) => {
>