import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; let camera, scene, renderer, controls, moonMarker, earthMesh, earthLabel; let initialCameraPosition; let initialControlsTarget; let currentView = 'zodiac'; // 'celestial', 'zodiac' let clock; let mansionObjects = []; // Stores {label, segment, primaryStar, index, numberLabel} for easy lookup let zodiacObjects = []; // Stores {label} for zodiac signs let constellationObjects = []; // Stores {group, primaryStar} for the constellation groups let currentMansionIndex = -1; // Tracks the currently highlighted mansion let highlightedConstellationIndex = -1; // Tracks the currently highlighted constellation group let metadataPanel; // Reference to the HTML metadata panel // --- UTILITY --- /** * Converts degrees to radians. */ function toRadians(degrees) { return degrees * (Math.PI / 180); } // ---------------------------------- // Updated to cleaner English names for the 28 Lunar Mansions const NAKSHATRAS = [ "Al-Sharatain", "Al-Butain", "Al-Thuraiya", "Al-Dabaran", "Al-Haqa", "Al-Hana", "Al-Dhira", "Al-Nathrah", "Al-Tarf", "Al-Jabhah", "Al-Zubrah", "Al-Sarfah", "Al-Awwa", "Al-Simak", "Al-Ghafr", "Al-Zubana", "Al-Iklil", "Al-Qalb", "Al-Shaulah", "Al-Naaim", "Al-Baldah", "Sa’d al-Dhabih", "Sa’d Bula", "Sa’d al-Suud", "Sa’d al-Akhbiyah", "Al-Fargh al-Awwal", "Al-Fargh al-Thani", "Batn al-Hut" ]; const MANSION_METADATA = [ { num: 1, arabic: "Al-Sharatain (الشرطان)", english: "Al-Sharatain", meaning: "The Two Signs", ruler: "Mars (Ares)", star: "Hamal (Alpha Arietis)", constellation: "Horns of Aries", favorableFor: "Beginnings, journeys, new projects" }, { num: 2, arabic: "Al-Butain (البطين)", english: "Al-Butain", meaning: "The Little Belly", ruler: "Venus (Aphrodite)", star: "N/A", constellation: "Belly of Aries", favorableFor: "Planting, building foundations, creating alliances" }, { num: 3, arabic: "Al-Thuraiya (الثريا)", english: "Al-Thuraiya", meaning: "The Pleiades", ruler: "Moon (Luna)", star: "Alcyone (Eta Tauri)", constellation: "The Pleiades (Seven Sisters)", favorableFor: "Seeking favors from rulers, important projects, traveling for gain" }, { num: 4, arabic: "Al-Dabaran (الدبران)", english: "Al-Dabaran", meaning: "The Follower", ruler: "Mars (Ares)", star: "Aldebaran (Alpha Tauri)", constellation: "Eye of Taurus", favorableFor: "Seeking justice, ending bad partnerships, overcoming enemies" }, { num: 5, arabic: "Al-Haqa (الهقعة)", english: "Al-Haqa", meaning: "The White Spot", ruler: "Mercury (Hermes)", star: "Lambda Orionis (Meissa)", constellation: "Head of Orion", favorableFor: "Seeking divine guidance, learning sacred knowledge, pilgrimages" }, { num: 6, arabic: "Al-Hana (الهنعة)", english: "Al-Hana", meaning: "The Brand Mark", ruler: "Jupiter (Zeus)", star: "Gamma Geminorum (Alhena)", constellation: "Feet of Gemini", favorableFor: "Hunting, besieging enemies, overcoming obstacles, gaining victories" }, { num: 7, arabic: "Al-Dhira (الذراع)", english: "Al-Dhira", meaning: "The Arm", ruler: "Venus (Aphrodite)", star: "Castor & Pollux (Alpha & Beta Geminorum)", constellation: "The Heavenly Twins", favorableFor: "Making alliances, seeking profit, building friendships" }, { num: 8, arabic: "Al-Nathrah (النثرة)", english: "Al-Nathrah", meaning: "The Tip of the Nose", ruler: "Saturn (Kronos)", star: "M44 star cluster", constellation: "The Beehive (Praesepe)", favorableFor: "Creating friendships, marriage, social gatherings, making peace" }, { num: 9, arabic: "Al-Tarf (الطرف)", english: "Al-Tarf", meaning: "The Glance", ruler: "Mercury (Hermes)", star: "Regulus (Alpha Leonis)", constellation: "Eye of the Lion", favorableFor: "Completing ongoing projects, finishing construction, harvesting" }, { num: 10, arabic: "Al-Jabhah (الجبهة)", english: "Al-Jabhah", meaning: "The Forehead", ruler: "Venus (Aphrodite)", star: "Zeta & Gamma Leonis (Adhafera & Algieba)", constellation: "Forehead of the Lion", favorableFor: "Business dealings, learning skills, seeking wisdom - Unfavorable For: Marriage, romantic pursuits" }, { num: 11, arabic: "Al-Zubrah (الزبرة)", english: "Al-Zubrah", meaning: "The Mane", ruler: "Jupiter (Zeus)", star: "Delta Leonis (Zosma)", constellation: "The Lion’s Mane", favorableFor: "Confronting enemies, competitions, demonstrating courage, leadership" }, { num: 12, arabic: "Al-Sarfah (الصرفة)", english: "Al-Sarfah", meaning: "The Changer", ruler: "Mars (Ares)", star: "Denebola (Beta Leonis)", constellation: "Tail of the Lion", favorableFor: "Harvesting crops, collecting debts, making beneficial changes" }, { num: 13, arabic: "Al-Awwa (الأعواء)", english: "Al-Awwa", meaning: "The Barker", ruler: "Mercury (Hermes)", star: "Spica (Alpha Virginis)", constellation: "The Wheat Sheaf of Virgo", favorableFor: "Beginning marriages, planting crops, starting business ventures" }, { num: 14, arabic: "Al-Simak (السماك)", english: "Al-Simak", meaning: "The Unarmed", ruler: "Venus (Aphrodite)", star: "Arcturus (Alpha Bootis)", constellation: "The Spike of Virgo", favorableFor: "Sea voyages, marriage ceremonies, partnerships" }, { num: 15, arabic: "Al-Ghafr (الغفر)", english: "Al-Ghafr", meaning: "The Covering", ruler: "Saturn (Kronos)", star: "Zubenelgenubi (Alpha Librae)", constellation: "The Covering Stars", favorableFor: "Finding lost objects, extracting treasures, uncovering secrets" }, { num: 16, arabic: "Al-Zubana (الزباني)", english: "Al-Zubana", meaning: "The Claws", ruler: "Jupiter (Zeus)", star: "Zubeneschamali & Zubenelgenubi (Beta & Alpha Librae)", constellation: "The Scales of Justice", favorableFor: "Trading, legal proceedings, making contracts, seeking justice" }, { num: 17, arabic: "Al-Iklil (الإكليل)", english: "Al-Iklil", meaning: "The Crown", ruler: "Mars (Ares)", star: "Beta & Delta Scorpii (Acrab & Dschubba)", constellation: "Crown of the Scorpion", favorableFor: "Protecting property, security measures, safeguarding valuables" }, { num: 18, arabic: "Al-Qalb (القلب)", english: "Al-Qalb", meaning: "The Heart", ruler: "Venus (Aphrodite)", star: "Antares (Alpha Scorpii)", constellation: "Heart of the Scorpion", favorableFor: "Exposing deception, revealing secrets, uncovering plots" }, { num: 19, arabic: "Al-Shaulah (الشولة)", english: "Al-Shaulah", meaning: "The Sting", ruler: "Mercury (Hermes)", star: "Lambda Scorpii (Shaula)", constellation: "The Scorpion’s Sting", favorableFor: "Overcoming obstacles, siege warfare, persistent efforts, breaking barriers" }, { num: 20, arabic: "Al-Naaim (النعائم)", english: "Al-Naaim", meaning: "The Ostriches", ruler: "Jupiter (Zeus)", star: "Gamma Sagittarii", constellation: "The Ostriches", favorableFor: "Taming animals, swift travel, escaping danger, training, racing" }, { num: 21, arabic: "Al-Baldah (البلدة)", english: "Al-Baldah", meaning: "The City", ruler: "Saturn (Kronos)", star: "Mu Sagittarii", constellation: "The City", favorableFor: "Medical treatments, healing, building communities, establishing order" }, { num: 22, arabic: "Sa’d al-Dhabih (سعد الذابح)", english: "Sa’d al-Dhabih", meaning: "The Lucky One of the Slaughterer", ruler: "Venus (Aphrodite)", star: "Alpha & Beta Capricorni (Algedi & Dabih)", constellation: "The Slaughterer’s Luck", favorableFor: "Eliminating enemies, ending bad relationships, cutting ties" }, { num: 23, arabic: "Sa’d Bula (سعد بولع)", english: "Sa’d Bula", meaning: "The Lucky One of the Swallower", ruler: "Mercury (Hermes)", star: "Epsilon Aquarii", constellation: "The Swallower", favorableFor: "Healing treatments, recovery, protection rituals, neutralizing threats" }, { num: 24, arabic: "Sa’d al-Suud (سعد السعود)", english: "Sa’d al-Suud", meaning: "The Luckiest of the Lucky", ruler: "Jupiter (Zeus)", star: "Beta Aquarii (Sadalsuud)", constellation: "The Luckiest Stars", favorableFor: "Marriage, partnerships, friendships, seeking fortune, victory - Special: The most fortunate mansion" }, { num: 25, arabic: "Sa’d al-Akhbiyah (سعد الأخبية)", english: "Sa’d al-Akhbiyah", meaning: "The Lucky One of the Tents", ruler: "Mars (Ares)", star: "Gamma Aquarii (Sadachbia)", constellation: "The Tents", favorableFor: "Military campaigns, strategic planning, overcoming fortifications" }, { num: 26, arabic: "Al-Fargh al-Awwal (الفرغ الأول)", english: "Al-Fargh al-Awwal", meaning: "The First Pouring", ruler: "Venus (Aphrodite)", star: "Alpha Pegasi (Markab)", constellation: "The First Pourer", favorableFor: "Love affairs, marriage, creating emotional bonds, artistic pursuits" }, { num: 27, arabic: "Al-Fargh al-Thani (الفرغ الثاني)", english: "Al-Fargh al-Thani", meaning: "The Second Pouring", ruler: "Mercury (Hermes)", star: "Gamma Pegasi (Algenib)", constellation: "The Second Pourer", favorableFor: "Harvesting, collecting profits, business ventures, accumulating wealth" }, { num: 28, arabic: "Batn al-Hut (بطن الحوت)", english: "Batn al-Hut", meaning: "The Belly of the Fish", ruler: "Saturn (Kronos)", star: "Beta Andromedae (Mirach)", constellation: "Belly of the Fish", favorableFor: "Spiritual practices, completing projects, seeking wisdom, meditation - Special: The final mansion - completion and preparation for renewal" } ]; const ZODIAC_SIGNS = [ "Aries", "Taurus", "Gemini", "Cancer", "Leo", "Virgo", "Libra", "Scorpio", "Sagittarius", "Capricorn", "Aquarius", "Pisces" ]; // Simplified, relative star coordinates and line connections for the 12 Zodiac constellations. // Coordinates are relative to the constellation's angular center (X=0, Y=0, Z=0) const CONSTELLATION_SHAPES = [ // Aries: The Ram (Simple V shape) { stars: [[0, 0, 0], [5, 5, 0], [10, 0, 0]], lines: [[0, 1], [1, 2]] }, // Taurus: The Bull (Head V) { stars: [[0, 0, 0], [5, 3, 0], [10, 0, 0], [5, -3, 0]], lines: [[0, 1], [1, 2], [2, 3], [3, 0]] }, // Gemini: The Twins (Two parallel lines) { stars: [[-2, 5, 0], [-2, -5, 0], [2, 5, 0], [2, -5, 0]], lines: [[0, 1], [2, 3]] }, // Cancer: The Crab (Small circle/square) { stars: [[0, 5, 0], [5, 0, 0], [0, -5, 0], [-5, 0, 0]], lines: [[0, 1], [1, 2], [2, 3], [3, 0]] }, // Leo: The Lion (Sickle shape) { stars: [[-5, 0, 0], [0, 5, 0], [5, 5, 0], [10, 0, 0], [5, -5, 0]], lines: [[0, 1], [1, 2], [2, 3], [3, 4]] }, // Virgo: The Maiden (Simple arc/line) { stars: [[-10, 0, 0], [-5, 5, 0], [0, 0, 0], [5, -5, 0], [10, 0, 0]], lines: [[0, 1], [1, 2], [2, 3], [3, 4]] }, // Libra: The Scales (Simple balance) { stars: [[-5, 5, 0], [5, 5, 0], [0, 0, 0], [0, -5, 0]], lines: [[0, 2], [1, 2], [2, 3]] }, // Scorpio: The Scorpion (Hook/J shape) { stars: [[0, 5, 0], [5, 0, 0], [0, -5, 0], [-5, -10, 0]], lines: [[0, 1], [1, 2], [2, 3]] }, // Sagittarius: The Archer (Teapot shape) { stars: [[-5, 5, 0], [5, 5, 0], [5, -5, 0], [-5, -5, 0], [0, 0, 0]], lines: [[0, 1], [1, 2], [2, 3], [3, 0], [0, 4]] }, // Capricorn: The Sea-Goat (Simple triangle) { stars: [[-5, 0, 0], [5, 0, 0], [0, 10, 0]], lines: [[0, 1], [1, 2], [2, 0]] }, // Aquarius: The Water Bearer (Wavy lines) { stars: [[-5, 5, 0], [0, 0, 0], [5, 5, 0], [-5, -5, 0], [0, -10, 0], [5, -5, 0]], lines: [[0, 1], [1, 2], [3, 4], [4, 5]] }, // Pisces: The Fish (Two linked Vs) { stars: [[-10, 5, 0], [-5, 0, 0], [0, 5, 0], [5, -5, 0], [10, 0, 0]], lines: [[0, 1], [1, 2], [1, 3], [3, 4]] } ]; const celestialRadius = 100; const EARTH_RADIUS = 10; const MANSION_NUMBER_DISTANCE = celestialRadius + 5; // New distance for the number labels const ZODIAC_RADIUS = celestialRadius + 50; const CONSTELLATION_RADIUS = celestialRadius + 120; // --- New Constants for Color/Highlighting --- const INACTIVE_COLOR = new THREE.Color(0x333333); // Dark grey for inactive elements const MANSION_HIGHLIGHT_COLOR = new THREE.Color(0xffffff); // Bright white for mansion segments/points const PRIMARY_STAR_HIGHLIGHT_COLOR = new THREE.Color(0xffd700); // Bright gold for primary star const PRIMARY_STAR_RADIUS = 1.5; // Slightly larger star const CONSTELLATION_DEFAULT_COLOR = new THREE.Color(0x6699ff); // Faint blue/white const CONSTELLATION_HIGHLIGHT_COLOR = new THREE.Color(0xffffff); // Bright white const SEGMENT_DEFAULT_OPACITY = 0.05; // Fainter segment opacity const SEGMENT_HIGHLIGHT_OPACITY = 0.4; const CONSTELLATION_SPREAD = 40; // Scatter distance /** * Creates a canvas element with the specified text and color. * @param {string} text The text to draw. * @param {string} color The CSS color string for the text. * @returns {HTMLCanvasElement} The canvas element. */ function createLabelCanvas(text, color = 'white') { const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); const fontSize = 72; context.font = `bold ${fontSize}px Arial`; // Measure text to determine canvas size const textMetrics = context.measureText(text); const textWidth = textMetrics.width; // Set canvas dimensions const padding = 30; const canvasWidth = textWidth + padding * 2; const canvasHeight = fontSize * 1.5; canvas.width = canvasWidth; canvas.height = canvasHeight; // Re-set font and draw text (needed after resizing canvas) context.font = `bold ${fontSize}px Arial`; context.fillStyle = color; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillText(text, canvasWidth / 2, canvasHeight / 2); return canvas; } /** * Creates a THREE.Sprite with a canvas-generated texture for text labeling. * @param {string} text The text to display. * @param {string} color The CSS color string for the text. * @returns {THREE.Sprite} The labeled sprite. */ function createLabelSprite(text, color = 'white') { const canvas = createLabelCanvas(text, color); // Create texture const texture = new THREE.CanvasTexture(canvas); texture.colorSpace = THREE.SRGBColorSpace; // Create material and sprite const material = new THREE.SpriteMaterial({ map: texture, transparent: true }); const sprite = new THREE.Sprite(material); // Scale the sprite based on the canvas aspect ratio for a readable size in world units const targetHeight = 10; const aspectRatio = canvas.width / canvas.height; const spriteWidth = targetHeight * aspectRatio; sprite.scale.set(spriteWidth, targetHeight, 1); return sprite; } function createCelestialMap() { const starGeometry = new THREE.SphereGeometry(PRIMARY_STAR_RADIUS, 16, 16); const totalMansions = NAKSHATRAS.length; const angleStep = (2 * Math.PI) / totalMansions; // Distances const labelDistance = ZODIAC_RADIUS; const innerRadius = EARTH_RADIUS; const outerRadius = celestialRadius; const starDistance = outerRadius + 10; // Primary star sits just outside the orbit line for (let i = 0; i < totalMansions; i++) { const centerAngle = i * angleStep; const startAngle = (i - 0.5) * angleStep; const endAngle = (i + 0.5) * angleStep; const mansionColor = INACTIVE_COLOR; // Start everything dark grey // --- 1. Create the Segment (Wedge) --- const shape = new THREE.Shape(); // Start from inner radius at start angle (Earth surface) shape.moveTo(innerRadius * Math.cos(startAngle), innerRadius * Math.sin(startAngle)); // Outer arc shape.absarc(0, 0, outerRadius, startAngle, endAngle, false); // Line back to inner radius at end angle shape.lineTo(innerRadius * Math.cos(endAngle), innerRadius * Math.sin(endAngle)); // Inner arc (back to start angle, reversed direction) shape.absarc(0, 0, innerRadius, endAngle, startAngle, true); const segmentGeometry = new THREE.ShapeGeometry(shape); segmentGeometry.rotateX(Math.PI / 2); // Rotate to XZ plane const segmentMaterial = new THREE.MeshBasicMaterial({ color: mansionColor, transparent: true, opacity: SEGMENT_DEFAULT_OPACITY, side: THREE.DoubleSide }); const segmentMesh = new THREE.Mesh(segmentGeometry, segmentMaterial); segmentMesh.visible = false; scene.add(segmentMesh); // Calculate position for labels/stars const x = outerRadius * Math.cos(centerAngle); const y = 0; const z = outerRadius * Math.sin(centerAngle); // --- 3. Create and position the Mansion Name label --- const labelX = labelDistance * Math.cos(centerAngle); const labelZ = labelDistance * Math.sin(centerAngle); // Labels start faint grey const label = createLabelSprite(NAKSHATRAS[i], '#777777'); label.position.set(labelX, y, labelZ); scene.add(label); // --- 4. Create the Primary Star (Alignment Marker) --- const starMaterial = new THREE.MeshBasicMaterial({ color: mansionColor }); const primaryStar = new THREE.Mesh(starGeometry, starMaterial); const starX = starDistance * Math.cos(centerAngle); const starZ = starDistance * Math.sin(centerAngle); primaryStar.position.set(starX, y, starZ); scene.add(primaryStar); // --- 5. Create and position the Mansion Number label --- const numberX = MANSION_NUMBER_DISTANCE * Math.cos(centerAngle); const numberZ = MANSION_NUMBER_DISTANCE * Math.sin(centerAngle); const mansionNumberLabel = createLabelSprite((i + 1).toString(), '#777777'); // Scale it smaller than the name label mansionNumberLabel.scale.set(5, 5, 1); mansionNumberLabel.position.set(numberX, y, numberZ); mansionNumberLabel.visible = false; // Start invisible scene.add(mansionNumberLabel); // Store for access in animate loop mansionObjects.push({ label: label, segment: segmentMesh, primaryStar: primaryStar, // Store the primary star object (the alignment marker) numberLabel: mansionNumberLabel, // Store the number label object index: i, originalColor: INACTIVE_COLOR.getHex() // Store default grey }); } } /** * Creates labels for the 12 Zodiac signs positioned outside the Lunar Mansions. */ function createZodiacLabels() { const totalSigns = ZODIAC_SIGNS.length; const angleStep = (2 * Math.PI) / totalSigns; // Use the same radius as the constellation figures for the labels const labelDistance = CONSTELLATION_RADIUS + 20; for (let i = 0; i < totalSigns; i++) { const angle = i * angleStep; const labelX = labelDistance * Math.cos(angle); const y = 0; const labelZ = labelDistance * Math.sin(angle); // Gold color for Zodiac signs const label = createLabelSprite(ZODIAC_SIGNS[i], '#ffcc00'); label.position.set(labelX, y, labelZ); label.visible = false; // Start hidden scene.add(label); zodiacObjects.push({ label: label, index: i }); } } /** * Creates simplistic visual representations of the 12 major constellations * near the Zodiac plane with increased 3D scatter for realism, using predefined shapes. */ function createConstellations() { const totalSigns = ZODIAC_SIGNS.length; const angleStep = (2 * Math.PI) / totalSigns; const starColor = CONSTELLATION_DEFAULT_COLOR; // Radial offset from the center of the scene for the constellation group const BASE_RADIUS = CONSTELLATION_RADIUS; for (let i = 0; i < totalSigns; i++) { const shapeData = CONSTELLATION_SHAPES[i]; const angle = i * angleStep; const group = new THREE.Group(); let primaryStarMesh = null; const starPositions = []; const primaryStarIndex = Math.floor(Math.random() * shapeData.stars.length); // Choose one star to be primary // 1. Create Stars based on predefined relative coordinates shapeData.stars.forEach((relPos, j) => { // Star Size Variation for realism (0.5 to 1.5 units) let starSize = 0.5 + Math.random() * 1.0; // Relative position from the shape data const [relX, relY, relZ] = relPos; // Apply a small randomized offset (the CONSTELLATION_SPREAD) to the relative star coordinates // to maintain the 3D depth effect. const scatterFactor = 0.1; const offsetX = relX + (Math.random() - 0.5) * CONSTELLATION_SPREAD * scatterFactor; const offsetY = relY + (Math.random() - 0.5) * CONSTELLATION_SPREAD * scatterFactor; const offsetZ = relZ + (Math.random() - 0.5) * CONSTELLATION_SPREAD * scatterFactor; // Calculate tangential and radial vectors based on the constellation angle const cosA = Math.cos(angle); const sinA = Math.sin(angle); // World position calculation: // Start at the base radius position: (BASE_RADIUS * cosA, 0, BASE_RADIUS * sinA) // Add the radial offset (relZ) multiplied by the radial vector // Add the tangential offset (relX) multiplied by the tangential vector const worldX = (BASE_RADIUS + offsetZ) * cosA + offsetX * (-sinA); const worldY = offsetY; const worldZ = (BASE_RADIUS + offsetZ) * sinA + offsetX * cosA; const starGeometry = new THREE.SphereGeometry(starSize, 8, 8); const starMaterial = new THREE.MeshBasicMaterial({ color: starColor }); const star = new THREE.Mesh(starGeometry, starMaterial); star.position.set(worldX, worldY, worldZ); group.add(star); starPositions.push(star.position); if (j === primaryStarIndex) { // Make the primary star slightly larger than others star.geometry = new THREE.SphereGeometry(starSize * 1.5, 8, 8); primaryStarMesh = star; } }); // 2. Add connecting lines if (shapeData.lines && shapeData.lines.length > 0) { const linePoints = []; shapeData.lines.forEach(pair => { linePoints.push(starPositions[pair[0]], starPositions[pair[1]]); }); const lineGeometry = new THREE.BufferGeometry().setFromPoints(linePoints); const lineMaterial = new THREE.LineBasicMaterial({ color: starColor, transparent: true, opacity: 0.5 }); const constellationLine = new THREE.LineSegments(lineGeometry, lineMaterial); // Use LineSegments for disconnected lines group.add(constellationLine); } group.visible = false; // Start hidden scene.add(group); constellationObjects.push({ group: group, primaryStar: primaryStarMesh, index: i }); } } /** * Creates a central sphere representing the Earth, now with a map texture. */ function createEarth() { const earthGeometry = new THREE.SphereGeometry(EARTH_RADIUS, 32, 32); // Load the Earth texture const textureLoader = new THREE.TextureLoader(); // KEEPING URL AS IS: 'https://dae.transientusercontent.xyz/uploads/e23d5152-0c9f-4fcd-92cc-1b1f719fcd74' const earthTexture = textureLoader.load('https://dae.transientusercontent.xyz/uploads/e23d5152-0c9f-4fcd-92cc-1b1f719fcd74'); // Apply texture best practices earthTexture.colorSpace = THREE.SRGBColorSpace; earthTexture.minFilter = THREE.LinearFilter; earthTexture.magFilter = THREE.LinearFilter; earthTexture.generateMipmaps = false; earthTexture.anisotropy = renderer.capabilities.getMaxAnisotropy(); const earthMaterial = new THREE.MeshPhongMaterial({ map: earthTexture, // Use the loaded texture specular: 0x333333, shininess: 30 }); earthMesh = new THREE.Mesh(earthGeometry, earthMaterial); earthMesh.position.set(0, 0, 0); scene.add(earthMesh); // Add Earth Label earthLabel = createLabelSprite("Earth", 'lightblue'); // Position the label distinctly above the Earth on the Y-axis earthLabel.position.set(0, EARTH_RADIUS + 7, 0); scene.add(earthLabel); } /** * Creates a circular line representing the lunar orbit path (Ecliptic). */ function createLunarOrbitPath() { // Use the same radius as the celestial mansions const orbitRadius = celestialRadius; // Create points for a circle on the XZ plane const points = []; const segments = 128; for (let i = 0; i <= segments; i++) { const angle = (i / segments) * Math.PI * 2; const x = orbitRadius * Math.cos(angle); const z = orbitRadius * Math.sin(angle); // Y=0 keeps it on the celestial equator points.push(new THREE.Vector3(x, 0, z)); } const geometry = new THREE.BufferGeometry().setFromPoints(points); const material = new THREE.LineBasicMaterial({ color: 0xffd700, // Gold color for the orbit linewidth: 2, transparent: true, opacity: 0.7 }); const orbit = new THREE.Line(geometry, material); scene.add(orbit); } /** * Creates the Moon marker sphere. */ function createMoon() { const moonRadius = 2.0; const moonGeometry = new THREE.SphereGeometry(moonRadius, 16, 16); // Silver/Grey color for the Moon const moonMaterial = new THREE.MeshPhongMaterial({ color: 0xcccccc, specular: 0xffffff, shininess: 50 }); moonMarker = new THREE.Mesh(moonGeometry, moonMaterial); // Initial position at 0 degrees (Al Sharatan) moonMarker.position.set(celestialRadius, 0, 0); scene.add(moonMarker); } /** * Switches the view back to the original celestial (geocentric) perspective. */ function showCelestialView() { if (currentView === 'celestial') return; currentView = 'celestial'; // Show all mansions, labels, segments, primary stars, and number labels. mansionObjects.forEach(obj => { obj.label.visible = true; if (obj.segment) obj.segment.visible = true; // Show segments if (obj.primaryStar) obj.primaryStar.visible = true; // Show primary star alignment markers if (obj.numberLabel) obj.numberLabel.visible = true; // Show number labels }); // Hide Zodiacs zodiacObjects.forEach(obj => { obj.label.visible = false; }); // Show Constellations (The realistic starry background along the ecliptic) constellationObjects.forEach(obj => { obj.group.visible = true; }); // Show Earth label again if (earthLabel) { earthLabel.visible = true; } // Show Earth mesh if (earthMesh) { earthMesh.visible = true; } // Restore camera position and target (original flat view) camera.position.copy(initialCameraPosition); controls.target.copy(initialControlsTarget); // Restore controls limits and capabilities controls.minDistance = 0.1; controls.maxDistance = 500; controls.enableZoom = true; // Restore zoom controls.enablePan = true; // Restore pan controls.update(); } /** * Switches the view to focus on the Zodiac signs and constellations. */ function showZodiacView() { if (currentView === 'zodiac') return; currentView = 'zodiac'; // 1. Manage visibility: Hide Mansions (Labels, Segments, Primary Stars, Number Labels) mansionObjects.forEach(obj => { obj.label.visible = false; if (obj.segment) obj.segment.visible = false; // Hide segments if (obj.primaryStar) obj.primaryStar.visible = false; // Hide primary star alignment markers if (obj.numberLabel) obj.numberLabel.visible = false; // Hide number labels }); // Show Zodiacs zodiacObjects.forEach(obj => { obj.label.visible = true; }); // Show Constellations constellationObjects.forEach(obj => { obj.group.visible = true; }); // Hide Earth label if (earthLabel) { earthLabel.visible = false; } // Show Earth mesh (as the center reference point) if (earthMesh) { earthMesh.visible = true; } // 2. Adjust camera for a wider view to encompass the zodiac labels (radius 220+) // Position higher than celestial view to fit the larger radius camera.position.set(0, CONSTELLATION_RADIUS + 50, 0); controls.target.set(0, 0, 0); // Restore controls limits and capabilities controls.minDistance = 0.1; controls.maxDistance = 500; controls.enableZoom = true; // Restore zoom controls.enablePan = true; // Restore pan controls.update(); } /** * Resets the view to the initial configuration (Zodiac View). */ function resetView() { // Calling showZodiacView already handles camera position and control settings showZodiacView(); // Ensure controls are updated immediately after view switch controls.update(); } /** * Toggles the visibility of the entire metadata panel's detail content. */ function toggleMetadataPanel() { // Target the main content wrapper const detailContent = document.getElementById('metadata-content'); const button = document.getElementById('toggle-details'); if (detailContent.style.display === 'none') { detailContent.style.display = 'block'; button.textContent = 'Hide Details'; button.style.color = '#ffcc00'; // Make it look active } else { detailContent.style.display = 'none'; button.textContent = 'Show Details'; button.style.color = '#66ccff'; // Make it look like a link } } /** * Creates the HTML buttons for switching between different views. */ function createInteractiveButtons() { const buttonContainer = document.createElement('div'); buttonContainer.style.cssText = ` position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); padding: 10px; background: rgba(0, 0, 0, 0.7); border-radius: 8px; z-index: 100; display: flex; /* Ensure buttons align horizontally */ gap: 10px; /* Space between buttons */ `; // Views ordered: Zodiac - Celestial const views = [ { name: "Zodiac View", handler: showZodiacView }, { name: "Celestial View", handler: showCelestialView } ]; views.forEach(view => { const button = document.createElement('button'); button.textContent = view.name; button.style.cssText = ` padding: 8px 15px; background: #333; color: white; border: 1px solid #555; border-radius: 5px; cursor: pointer; font-family: Arial, sans-serif; transition: background 0.2s; white-space: nowrap; /* Prevent wrapping */ `; button.onmouseover = () => button.style.background = '#555'; button.onmouseout = () => button.style.background = '#333'; button.onclick = view.handler; buttonContainer.appendChild(button); }); // Add Reset Button const resetButton = document.createElement('button'); resetButton.textContent = "Reset View"; resetButton.style.cssText = ` padding: 8px 15px; background: #CC0000; /* Red for reset */ color: white; border: 1px solid #770000; border-radius: 5px; cursor: pointer; font-family: Arial, sans-serif; transition: background 0.2s; white-space: nowrap; /* Prevent wrapping */ `; resetButton.onmouseover = () => resetButton.style.background = '#AA0000'; resetButton.onmouseout = () => resetButton.style.background = '#CC0000'; resetButton.onclick = resetView; buttonContainer.appendChild(resetButton); document.body.appendChild(buttonContainer); } /** * Creates the HTML panel to display the metadata of the current Lunar Mansion. */ function createMetadataPanel() { metadataPanel = document.createElement('div'); metadataPanel.id = 'metadata-panel'; // Styling the panel metadataPanel.style.cssText = ` position: absolute; top: 10px; right: 10px; width: 300px; background: rgba(0, 0, 0, 0.7); color: white; padding: 15px; border-radius: 8px; font-family: Arial, sans-serif; font-size: 14px; z-index: 100; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); `; metadataPanel.innerHTML = `

Lunar Mansion Data

Ruler:

Constellation:

Primary Star:

Favorable For:

`; document.body.appendChild(metadataPanel); // Attach the toggle handler document.getElementById('toggle-details').onclick = toggleMetadataPanel; } /** * Updates the metadata panel with information for the given mansion index. * @param {number} index The 0-based index of the current mansion. */ function updateMetadataPanel(index) { if (index < 0 || index >= MANSION_METADATA.length) return; const data = MANSION_METADATA[index]; document.getElementById('mansion-title').textContent = `Mansion ${data.num}: ${data.english}`; document.getElementById('mansion-arabic').textContent = data.arabic; document.getElementById('mansion-meaning').textContent = `"${data.meaning}"`; document.getElementById('mansion-ruler').textContent = data.ruler; document.getElementById('mansion-constellation').textContent = data.constellation; document.getElementById('mansion-star').textContent = data.star; document.getElementById('mansion-favorable').textContent = data.favorableFor; } function init() { // Scene setup scene = new THREE.Scene(); scene.background = new THREE.Color(0x101010); // Clock for animation timing clock = new THREE.Clock(); // Camera setup camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); // Set camera for initial top-down, flat circular view camera.position.set(0, celestialRadius * 1.5, 0); // Position high on Y-axis (150) camera.lookAt(new THREE.Vector3(0, 0, 0)); // Look straight down // Renderer setup renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.outputColorSpace = THREE.SRGBColorSpace; document.body.appendChild(renderer.domElement); // Controls controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; // Store initial state for view switching initialCameraPosition = camera.position.clone(); initialControlsTarget = controls.target.clone(); // Lighting const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // Reduced ambient light scene.add(ambientLight); // Directional light for shading the Earth const directionalLight = new THREE.DirectionalLight(0xffffff, 2); directionalLight.position.set(1, 1, 1).normalize(); scene.add(directionalLight); // Create the celestial map (Lunar Mansions) - Now creates segments, primary stars, and number labels createCelestialMap(); // Create the central Earth model createEarth(); // Create the lunar orbit path createLunarOrbitPath(); // Create the Moon marker createMoon(); // Create the Zodiac Labels createZodiacLabels(); // Create the Constellation figures createConstellations(); // Create the interactive buttons createInteractiveButtons(); // Create the metadata panel and initialize it with the first mansion createMetadataPanel(); updateMetadataPanel(0); // Initialize with Mansion 1 window.addEventListener('resize', onWindowResize); // Set initial view to Zodiac as per new requested order preference showZodiacView(); } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function animate() { requestAnimationFrame(animate); // Get delta time for frame-rate independent rotation const delta = clock.getDelta(); const time = clock.getElapsedTime(); // Total time elapsed if (earthMesh) { // Only rotate Earth slowly around the Y-axis in Global Celestial View if (currentView === 'celestial') { const earthRotationSpeed = Math.PI / 30; // 2*PI / 60 earthMesh.rotation.y += delta * earthRotationSpeed; } // Earth rotation is frozen in 'zodiac' view } if (moonMarker) { // Time constant: A full rotation in 60 seconds for a much smoother animation speed const rotationSpeed = (2 * Math.PI) / 60; // Radians per second // Calculate the angle based on total elapsed time const angle = time * rotationSpeed; // Position the moon on the XZ plane at the celestial radius const x = celestialRadius * Math.cos(angle); const z = celestialRadius * Math.sin(angle); moonMarker.position.set(x, 0, z); // --- Mansion Highlighting Logic --- const totalMansions = NAKSHATRAS.length; const totalZodiacs = ZODIAC_SIGNS.length; const angleStep = (2 * Math.PI) / totalMansions; // Normalize angle to 0 to 2*PI, where 0 is the positive X axis (Al Sharatan) let normalizedAngle = angle % (2 * Math.PI); if (normalizedAngle < 0) { normalizedAngle += 2 * Math.PI; } // Calculate the index based on the normalized angle let newMansionIndex = Math.floor(normalizedAngle / angleStep); if (newMansionIndex !== currentMansionIndex) { // 1. Reset previous mansion if (currentMansionIndex !== -1 && mansionObjects[currentMansionIndex]) { const prevObj = mansionObjects[currentMansionIndex]; // Reset segment color and opacity if (prevObj.segment) { prevObj.segment.material.color.set(INACTIVE_COLOR); prevObj.segment.material.opacity = SEGMENT_DEFAULT_OPACITY; prevObj.segment.material.needsUpdate = true; } // Reset Primary Star (Alignment Marker) color if (prevObj.primaryStar) { prevObj.primaryStar.material.color.set(INACTIVE_COLOR); } // Reset Name label color (faint grey text) if (prevObj.label.material.map) { prevObj.label.material.map.dispose(); } prevObj.label.material.map = new THREE.CanvasTexture(createLabelCanvas(NAKSHATRAS[currentMansionIndex], '#777777')); prevObj.label.material.map.colorSpace = THREE.SRGBColorSpace; prevObj.label.material.needsUpdate = true; // Reset Number label color (faint grey text) if (prevObj.numberLabel) { if (prevObj.numberLabel.material.map) { prevObj.numberLabel.material.map.dispose(); } prevObj.numberLabel.material.map = new THREE.CanvasTexture(createLabelCanvas((currentMansionIndex + 1).toString(), '#777777')); prevObj.numberLabel.material.map.colorSpace = THREE.SRGBColorSpace; prevObj.numberLabel.material.needsUpdate = true; } } // 2. Highlight new mansion if (mansionObjects[newMansionIndex]) { const newObj = mansionObjects[newMansionIndex]; // Highlight segment color and opacity if (newObj.segment) { newObj.segment.material.color.set(MANSION_HIGHLIGHT_COLOR); newObj.segment.material.opacity = SEGMENT_HIGHLIGHT_OPACITY; // Brighter opacity newObj.segment.material.needsUpdate = true; } // Highlight Primary Star (Alignment Marker) (bright gold) if (newObj.primaryStar) { newObj.primaryStar.material.color.set(PRIMARY_STAR_HIGHLIGHT_COLOR); } // Highlight Name label color (yellow text) if (newObj.label.material.map) { newObj.label.material.map.dispose(); } newObj.label.material.map = new THREE.CanvasTexture(createLabelCanvas(NAKSHATRAS[newMansionIndex], 'yellow')); newObj.label.material.map.colorSpace = THREE.SRGBColorSpace; newObj.label.material.needsUpdate = true; // Highlight Number label color (yellow text) if (newObj.numberLabel) { if (newObj.numberLabel.material.map) { newObj.numberLabel.material.map.dispose(); } newObj.numberLabel.material.map = new THREE.CanvasTexture(createLabelCanvas((newMansionIndex + 1).toString(), 'yellow')); newObj.numberLabel.material.map.colorSpace = THREE.SRGBColorSpace; newObj.numberLabel.material.needsUpdate = true; } } // --- Constellation Highlighting Logic --- // Map 28 mansions (0-27) to 12 zodiac signs (0-11) const newZodiacIndex = Math.floor(newMansionIndex * totalZodiacs / totalMansions); if (newZodiacIndex !== highlightedConstellationIndex) { // a. Reset previous constellation if (highlightedConstellationIndex !== -1) { const prevObj = constellationObjects[highlightedConstellationIndex]; const prevGroup = prevObj.group; prevGroup.children.forEach(child => { if (child.material) { if (child instanceof THREE.Mesh) { // Reset all stars to default star color child.material.color.copy(CONSTELLATION_DEFAULT_COLOR); } else if (child instanceof THREE.LineSegments) { // Changed from Line to LineSegments child.material.color.copy(CONSTELLATION_DEFAULT_COLOR); child.material.opacity = 0.5; } child.material.needsUpdate = true; // Ensure change is rendered } }); } // b. Highlight new constellation if (constellationObjects[newZodiacIndex]) { const newObj = constellationObjects[newZodiacIndex]; const newGroup = newObj.group; newGroup.children.forEach(child => { if (child.material) { if (child instanceof THREE.Mesh) { if (child === newObj.primaryStar) { // Highlight the primary star in bright gold/yellow child.material.color.set(PRIMARY_STAR_HIGHLIGHT_COLOR); } else { // Highlight normal stars in white child.material.color.copy(CONSTELLATION_HIGHLIGHT_COLOR); } } else if (child instanceof THREE.LineSegments) { // Changed from Line to LineSegments child.material.color.copy(CONSTELLATION_HIGHLIGHT_COLOR); child.material.opacity = 1.0; // Make line fully opaque } child.material.needsUpdate = true; // Ensure change is rendered } }); } highlightedConstellationIndex = newZodiacIndex; } currentMansionIndex = newMansionIndex; // 3. Update the metadata panel with the new mansion's data updateMetadataPanel(currentMansionIndex); } } controls.update(); renderer.render(scene, camera); } init(); animate();

m3th1ld3

Celestial Lunar Mansions Map

Celestial Lunar Mansions Map