SOLAR SYSTEM-3D

நமது சூரியக் குடும்பத்தைப் பற்றி அறிந்துக் கொள்வோமா?

நமது சூரிய குடும்பத்தை (Solar System) முப்பரிமாணத்தில் (3D) சுற்றிப் பார்க்கும் வகையில் இந்த சிறப்புப் பக்கம் உருவாக்கப்பட்டுள்ளது. இதில் உள்ள கோள்களை உங்கள் மவுஸ் அல்லது விரலால் தொட்டுச் சுழற்றிப் பார்க்கலாம். ஒவ்வொரு கோளைப் பற்றிய தமிழ் மற்றும் ஆங்கிலத் தகவல்களை அறிய அந்தந்த கோள்களின் மீது கிளிக் செய்யவும்.

<!DOCTYPE html>
<html lang="ta">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Solar System Explorer</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; user-select: none; }
  body, html { width: 100%; height: 100%; overflow: hidden; background: #02040a; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: #f8fafc; }
  #canvas-container { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; }
  
  /* Glassmorphic UI */
  .hud-header {
    position: absolute; top: 16px; left: 16px; z-index: 10;
    background: rgba(10, 15, 30, 0.75); backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px;
    padding: 12px 18px; pointer-events: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  }
  .hud-header h1 { font-size: 18px; font-weight: 700; color: #fbbf24; margin-bottom: 3px; letter-spacing: 0.5px; }
  .hud-header p { font-size: 12px; color: #94a3b8; }

.planet-bar {
    position: absolute; top: 16px; left: 50%; transform: translateX(-50%); z-index: 10;
    display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
    background: rgba(10, 15, 30, 0.75); backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 30px;
    padding: 6px 12px; max-width: 92vw;
  }
  .planet-btn {
    background: transparent; border: 1px solid transparent; color: #cbd5e1;
    padding: 5px 11px; border-radius: 20px; font-size: 12px; cursor: pointer;
    transition: all 0.25s ease; font-weight: 500; white-space: nowrap;
  }
  .planet-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
  .planet-btn.active { background: rgba(56, 189, 248, 0.2); border-color: #38bdf8; color: #38bdf8; font-weight: 600; }

.info-card {
    position: absolute; top: 80px; right: 16px; width: 310px; z-index: 10;
    background: rgba(10, 15, 30, 0.82); backdrop-filter: blur(14px);
    border: 1px solid rgba(56, 189, 248, 0.25); border-radius: 14px;
    padding: 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  }
  .info-card.hidden { transform: translateX(350px); opacity: 0; pointer-events: none; }
  .info-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 8px; }
  .info-title { font-size: 19px; font-weight: 700; color: #38bdf8; }
  .info-sub { font-size: 12px; color: #94a3b8; display: block; margin-top: 2px; }
  .close-btn { background: none; border: none; color: #94a3b8; font-size: 18px; cursor: pointer; line-height: 1; padding: 2px 6px; }
  .close-btn:hover { color: #fff; }
  .info-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .stat-box { background: rgba(255, 255, 255, 0.04); padding: 8px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); }
  .stat-label { font-size: 10px; color: #64748b; text-transform: uppercase; display: block; }
  .stat-val { font-size: 13px; font-weight: 600; color: #e2e8f0; margin-top: 2px; display: block; }
  .info-desc { font-size: 13px; line-height: 1.55; color: #cbd5e1; }

.controls-bar {
    position: absolute; bottom: 16px; left: 16px; z-index: 10;
    display: flex; align-items: center; gap: 12px;
    background: rgba(10, 15, 30, 0.75); backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px;
    padding: 8px 14px; font-size: 12px;
  }
  .ctrl-btn {
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
    color: #f8fafc; padding: 5px 10px; border-radius: 6px; cursor: pointer; font-size: 12px;
  }
  .ctrl-btn:hover { background: rgba(255,255,255,0.18); }
  input[type="range"] { width: 80px; accent-color: #38bdf8; cursor: pointer; }

@media (max-width: 700px) {
    .hud-header { display: none; }
    .info-card { width: calc(100% - 32px); top: auto; bottom: 70px; right: 16px; }
    .controls-bar { padding: 6px 10px; gap: 8px; }
  }
</style>
</head>
<body>

<div class="hud-header">
  <h1>3D சூரிய குடும்பம்</h1>
  <p>மவுஸால் சுழற்றவும் • கோள்களைக் கிளிக் செய்யவும்</p>
</div>

<div class="info-card" id="info-card">
  <div class="info-header">
    <div>
      <div class="info-title" id="info-ta">பூமி</div>
      <span class="info-sub" id="info-en">Earth</span>
    </div>
    <button class="close-btn" id="close-info">✕</button>
  </div>
  <div class="info-stats">
    <div class="stat-box">
      <span class="stat-label">சூரியனிலிருந்து தூரம்</span>
      <span class="stat-val" id="info-dist">149.6 M km</span>
    </div>
    <div class="stat-box">
      <span class="stat-label">சுற்றுப்பாதை காலம்</span>
      <span class="stat-val" id="info-orbit">365.25 நாட்கள்</span>
    </div>
  </div>
  <p class="info-desc" id="info-desc"></p>
</div>

<div class="controls-bar">
  <button class="ctrl-btn" id="play-pause">⏸ Pause</button>
  <label style="display:flex; align-items:center; gap:6px;">
    <span>வேகம்:</span>
    <input type="range" id="speed-slider" min="0" max="3" step="0.1" value="1">
  </label>
  <button class="ctrl-btn" id="toggle-orbits">Orbits: ON</button>
  <button class="ctrl-btn" id="reset-cam">Reset View</button>
</div>

const container = document.getElementById('canvas-container');
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1500);
  camera.position.set(0, 48, 95);

const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  container.appendChild(renderer.domElement);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  controls.dampingFactor = 0.06;
  controls.maxDistance = 350;
  controls.minDistance = 6;

// Lighting
  const ambientLight = new THREE.AmbientLight(0x334155, 0.9);
  scene.add(ambientLight);
  const sunLight = new THREE.PointLight(0xffffff, 2.2, 500);
  scene.add(sunLight);

// Procedural Canvas Texture Generator
  function createPlanetTexture(c1, c2, isSun) {
    const canvas = document.createElement('canvas');
    canvas.width = 512; canvas.height = 256;
    const ctx = canvas.getContext('2d');
    const grad = ctx.createLinearGradient(0, 0, 0, 256);
    grad.addColorStop(0, c2); grad.addColorStop(0.5, c1); grad.addColorStop(1, c2);
    ctx.fillStyle = grad; ctx.fillRect(0, 0, 512, 256);

for (let i = 0; i < 35; i++) {
      ctx.fillStyle = i % 2 === 0 ? c1 : c2;
      ctx.globalAlpha = isSun ? 0.25 : 0.15;
      const y = Math.random() * 256;
      const h = 3 + Math.random() * 18;
      ctx.fillRect(0, y, 512, h);
    }
    return new THREE.CanvasTexture(canvas);
  }

// Stars Background
  const starGeo = new THREE.BufferGeometry();
  const starCount = 3000;
  const starPos = new Float32Array(starCount * 3);
  for(let i = 0; i < starCount * 3; i++) {
    starPos[i] = (Math.random() - 0.5) * 700;
  }
  starGeo.setAttribute('position', new THREE.BufferAttribute(starPos, 3));
  const starMat = new THREE.PointsMaterial({ color: 0xffffff, size: 0.7, transparent: true, opacity: 0.85 });
  const stars = new THREE.Points(starGeo, starMat);
  scene.add(stars);

// Create Solar Bodies
  const planetMeshes = [];
  const orbitLines = [];
  const navBar = document.getElementById('planet-nav');

bodiesData.forEach((data, idx) => {
    const tex = createPlanetTexture(data.color1, data.color2, data.id === 'sun');
    const geo = new THREE.SphereGeometry(data.radius, 36, 36);
    const mat = data.id === 'sun'
      ? new THREE.MeshBasicMaterial({ map: tex })
      : new THREE.MeshStandardMaterial({ map: tex, roughness: 0.75, metalness: 0.1 });

const mesh = new THREE.Mesh(geo, mat);
    mesh.userData = { ...data, angle: Math.random() * Math.PI * 2 };
    scene.add(mesh);
    planetMeshes.push(mesh);

// Sun Glow
    if (data.id === 'sun') {
      const glowGeo = new THREE.SphereGeometry(data.radius * 1.22, 32, 32);
      const glowMat = new THREE.MeshBasicMaterial({ color: 0xf97316, transparent: true, opacity: 0.22, side: THREE.BackSide });
      mesh.add(new THREE.Mesh(glowGeo, glowMat));
    }

// Saturn Rings
    if (data.hasRings) {
      const ringGeo = new THREE.RingGeometry(data.radius * 1.35, data.radius * 2.3, 64);
      const ringMat = new THREE.MeshStandardMaterial({ color: 0xfde047, side: THREE.DoubleSide, transparent: true, opacity: 0.65 });
      const ring = new THREE.Mesh(ringGeo, ringMat);
      ring.rotation.x = Math.PI / 2.3;
      mesh.add(ring);
    }

// Earth's Moon
    if (data.hasMoon) {
      const moonGeo = new THREE.SphereGeometry(0.42, 16, 16);
      const moonMat = new THREE.MeshStandardMaterial({ color: 0xcbd5e1 });
      const moon = new THREE.Mesh(moonGeo, moonMat);
      moon.position.set(3.2, 0.3, 0);
      mesh.add(moon);
      mesh.userData.moon = moon;
    }

// Orbit Ring
    if (data.dist > 0) {
      const orbitGeo = new THREE.RingGeometry(data.dist - 0.08, data.dist + 0.08, 128);
      const orbitMat = new THREE.MeshBasicMaterial({ color: 0x38bdf8, side: THREE.DoubleSide, transparent: true, opacity: 0.18 });
      const orbit = new THREE.Mesh(orbitGeo, orbitMat);
      orbit.rotation.x = Math.PI / 2;
      scene.add(orbit);
      orbitLines.push(orbit);
    }

// Navigation Button
    const btn = document.createElement('button');
    btn.className = 'planet-btn' + (data.id === 'earth' ? ' active' : '');
    btn.textContent = data.ta;
    btn.onclick = () => selectPlanet(mesh, btn);
    navBar.appendChild(btn);
  });

// Asteroid Belt (Between Mars & Jupiter)
  const astGeo = new THREE.BufferGeometry();
  const astCount = 900;
  const astPos = new Float32Array(astCount * 3);
  for(let i = 0; i < astCount; i++) {
    const r = 34.5 + Math.random() * 3.5;
    const theta = Math.random() * Math.PI * 2;
    astPos[i*3] = Math.cos(theta) * r;
    astPos[i*3+1] = (Math.random() - 0.5) * 1.4;
    astPos[i*3+2] = Math.sin(theta) * r;
  }
  astGeo.setAttribute('position', new THREE.BufferAttribute(astPos, 3));
  const astMat = new THREE.PointsMaterial({ color: 0x94a3b8, size: 0.35 });
  const asteroidBelt = new THREE.Points(astGeo, astMat);
  scene.add(asteroidBelt);

// Selection & HUD Logic
  let focusedMesh = planetMeshes[3]; // Default Earth
  const infoCard = document.getElementById('info-card');

function selectPlanet(mesh, btnEl) {
    focusedMesh = mesh;
    const d = mesh.userData;
    document.getElementById('info-ta').textContent = d.ta;
    document.getElementById('info-en').textContent = d.en;
    document.getElementById('info-dist').textContent = d.realDist;
    document.getElementById('info-orbit').textContent = d.period;
    document.getElementById('info-desc').textContent = d.desc;
    infoCard.classList.remove('hidden');

document.querySelectorAll('.planet-btn').forEach(b => b.classList.remove('active'));
    if (btnEl) btnEl.classList.add('active');
  }

// Initialize with Earth info
  selectPlanet(planetMeshes[3], navBar.children[3]);
  focusedMesh = null; // Start with free overview camera

document.getElementById('close-info').onclick = () => {
    infoCard.classList.add('hidden');
    focusedMesh = null;
  };

// Raycaster for 3D Mouse Click on Planets
  const raycaster = new THREE.Raycaster();
  const mouse = new THREE.Vector2();
  let mouseX = 0, mouseY = 0;

window.addEventListener('pointerdown', (e) => {
    if (e.target.tagName !== 'CANVAS') return;
    mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
    raycaster.setFromCamera(mouse, camera);
    const hits = raycaster.intersectObjects(planetMeshes);
    if (hits.length > 0) {
      const hitMesh = hits[0].object;
      const idx = planetMeshes.indexOf(hitMesh);
      selectPlanet(hitMesh, navBar.children[idx]);
    }
  });

window.addEventListener('pointermove', (e) => {
    mouseX = (e.clientX / window.innerWidth - 0.5) * 2;
    mouseY = (e.clientY / window.innerHeight - 0.5) * 2;
  });

// Bottom Controls
  let isPlaying = true;
  let simSpeed = 1;
  let showOrbits = true;

// Animation Loop
  function animate() {
    requestAnimationFrame(animate);

if (isPlaying) {
      planetMeshes.forEach(mesh => {
        const d = mesh.userData;
        mesh.rotation.y += 0.008;
        if (d.dist > 0) {
          d.angle += d.speed * 0.35 * simSpeed;
          mesh.position.x = Math.cos(d.angle) * d.dist;
          mesh.position.z = Math.sin(d.angle) * d.dist;
        }
        if (d.moon) {
          const t = Date.now() * 0.002;
          d.moon.position.x = Math.cos(t) * 3.2;
          d.moon.position.z = Math.sin(t) * 3.2;
        }
      });
      asteroidBelt.rotation.y += 0.0005 * simSpeed;
    }

// Subtle mouse parallax on starfield
    stars.rotation.y += (mouseX * 0.05 - stars.rotation.y) * 0.02;
    stars.rotation.x += (mouseY * 0.05 - stars.rotation.x) * 0.02;

if (focusedMesh) {
      const targetPos = new THREE.Vector3();
      focusedMesh.getWorldPosition(targetPos);
      controls.target.lerp(targetPos, 0.08);
    }

controls.update();
    renderer.render(scene, camera);
  }
  animate();

window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  });
</script>
</body>
</html>

SOLAR SYSTEM-3D

Post a Comment

Contact Form