Hugging Face's logo

Spaces:
engerl
/
sun9
Running

App Files Community
sun9 / index.html
engerl's picture
engerl
Add 2 files
3769c90 verified
raw
history blame contribute delete
37.8 kB
<!DOCTYPE html>
<html lang="zh-TW">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>3D 太陽系互動模擬器</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/gsap@3.11.4/dist/gsap.min.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 body {
 margin: 0;
 overflow: hidden;
 font-family: 'Arial', sans-serif;
 color: white;
 }
#container {
 position: absolute;
 width: 100%;
 height: 100%;
 }
#ui {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 pointer-events: none;
 z-index: 10;
 }
.panel {
 pointer-events: all;
 background: rgba(0, 0, 0, 0.7);
 border-radius: 10px;
 padding: 15px;
 backdrop-filter: blur(5px);
 border: 1px solid rgba(255, 255, 255, 0.1);
 box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
 }
.control-btn {
 background: rgba(255, 255, 255, 0.1);
 border: none;
 color: white;
 border-radius: 50%;
 width: 40px;
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 transition: all 0.3s;
 }
.control-btn:hover {
 background: rgba(255, 255, 255, 0.3);
 transform: scale(1.1);
 }
.planet-info {
 opacity: 0;
 transition: opacity 0.5s;
 }
.planet-info.active {
 opacity: 1;
 }
.orbit {
 position: absolute;
 border: 1px solid rgba(255, 255, 255, 0.2);
 border-radius: 50%;
 transform-origin: center;
 }
.loading-screen {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: #000;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 z-index: 100;
 transition: opacity 1s;
 }
.loading-bar {
 width: 300px;
 height: 3px;
 background: rgba(255, 255, 255, 0.2);
 margin-top: 20px;
 overflow: hidden;
 }
.loading-progress {
 height: 100%;
 background: linear-gradient(90deg, #00d2ff, #3a7bd5);
 width: 0%;
 transition: width 0.3s;
 }
.tooltip {
 position: absolute;
 background: rgba(0, 0, 0, 0.8);
 padding: 5px 10px;
 border-radius: 5px;
 font-size: 12px;
 pointer-events: none;
 opacity: 0;
 transition: opacity 0.3s;
 z-index: 20;
 }
.star {
 position: absolute;
 background: white;
 border-radius: 50%;
 pointer-events: none;
 }
/* 行星標籤 */
 .planet-label {
 position: absolute;
 color: white;
 font-size: 12px;
 text-shadow: 0 0 5px black;
 white-space: nowrap;
 pointer-events: none;
 transform: translate(-50%, 0);
 opacity: 0;
 transition: opacity 0.3s;
 }
.planet-label.active {
 opacity: 1;
 }
 </style>
</head>
<body>
 <div class="loading-screen">
 <h1 class="text-3xl font-bold mb-4 text-white">太陽系模擬器</h1>
 <p class="text-gray-300 mb-6">正在載入宇宙數據...</p>
 <div class="loading-bar">
 <div class="loading-progress" id="loadingProgress"></div>
 </div>
 </div>
<div id="container"></div>
<div id="ui">
 <!-- 左上角控制面板 -->
 <div class="panel absolute top-4 left-4 w-64">
 <h2 class="text-xl font-bold mb-4">太陽系控制中心</h2>
 <div class="flex justify-between mb-4">
 <button id="playPauseBtn" class="control-btn">
 <i class="fas fa-play"></i>
 </button>
 <button id="speedDownBtn" class="control-btn">
 <i class="fas fa-backward"></i>
 </button>
 <button id="speedUpBtn" class="control-btn">
 <i class="fas fa-forward"></i>
 </button>
 <button id="resetBtn" class="control-btn">
 <i class="fas fa-redo"></i>
 </button>
 </div>
 <div class="mb-2">
 <label class="block text-sm mb-1">時間流速: <span id="speedValue">1x</span></label>
 <input type="range" id="speedSlider" min="0.1" max="10" step="0.1" value="1" class="w-full">
 </div>
 <div class="mb-2">
 <label class="block text-sm mb-1">視角距離: <span id="distanceValue">100%</span></label>
 <input type="range" id="distanceSlider" min="20" max="200" value="100" class="w-full">
 </div>
 <div class="flex items-center mt-4">
 <input type="checkbox" id="showOrbits" checked class="mr-2">
 <label for="showOrbits" class="text-sm">顯示軌道</label>
 </div>
 <div class="flex items-center mt-2">
 <input type="checkbox" id="showLabels" checked class="mr-2">
 <label for="showLabels" class="text-sm">顯示標籤</label>
 </div>
 <div class="flex items-center mt-2">
 <input type="checkbox" id="showMoon" checked class="mr-2">
 <label for="showMoon" class="text-sm">顯示月球</label>
 </div>
 </div>
<!-- 右下角行星信息面板 -->
 <div class="panel absolute bottom-4 right-4 w-72 planet-info">
 <div class="flex items-center mb-3">
 <div id="planetIcon" class="w-10 h-10 rounded-full mr-3"></div>
 <h2 id="planetName" class="text-xl font-bold">行星名稱</h2>
 </div>
 <div class="grid grid-cols-2 gap-2 text-sm">
 <div>
 <div class="text-gray-400">類型</div>
 <div id="planetType">類地行星</div>
 </div>
 <div>
 <div class="text-gray-400">直徑</div>
 <div id="planetDiameter">12,742 km</div>
 </div>
 <div>
 <div class="text-gray-400">質量</div>
 <div id="planetMass">5.97 × 10²⁴ kg</div>
 </div>
 <div>
 <div class="text-gray-400">重力</div>
 <div id="planetGravity">9.8 m/s²</div>
 </div>
 <div>
 <div class="text-gray-400">軌道周期</div>
 <div id="planetOrbitPeriod">365.25 天</div>
 </div>
 <div>
 <div class="text-gray-400">自轉周期</div>
 <div id="planetRotationPeriod">24 小時</div>
 </div>
 <div class="col-span-2">
 <div class="text-gray-400">平均溫度</div>
 <div id="planetTemperature">15°C</div>
 </div>
 <div class="col-span-2">
 <div class="text-gray-400">衛星數量</div>
 <div id="planetMoons">1 (月球)</div>
 </div>
 </div>
 <button id="focusPlanetBtn" class="mt-3 w-full py-2 bg-blue-600 hover:bg-blue-700 rounded transition">
 <i class="fas fa-crosshairs mr-2"></i>聚焦此行星
 </button>
 </div>
<!-- 左下角時間顯示 -->
 <div class="panel absolute bottom-4 left-4">
 <div class="text-sm text-gray-400">模擬日期</div>
 <div id="simulationDate" class="text-xl">2023年1月1日</div>
 <div id="simulationTime" class="text-sm">00:00:00</div>
 </div>
<!-- 行星選擇按鈕 -->
 <div class="panel absolute top-1/2 right-4 transform -translate-y-1/2">
 <div class="flex flex-col space-y-2">
 <button data-planet="sun" class="control-btn bg-yellow-500 hover:bg-yellow-600" title="太陽">
 <i class="fas fa-sun"></i>
 </button>
 <button data-planet="mercury" class="control-btn bg-gray-400 hover:bg-gray-500" title="水星">
 <i class="fas fa-circle"></i>
 </button>
 <button data-planet="venus" class="control-btn bg-yellow-200 hover:bg-yellow-300" title="金星">
 <i class="fas fa-circle"></i>
 </button>
 <button data-planet="earth" class="control-btn bg-blue-500 hover:bg-blue-600" title="地球">
 <i class="fas fa-circle"></i>
 </button>
 <button data-planet="mars" class="control-btn bg-red-500 hover:bg-red-600" title="火星">
 <i class="fas fa-circle"></i>
 </button>
 <button data-planet="jupiter" class="control-btn bg-yellow-700 hover:bg-yellow-800" title="木星">
 <i class="fas fa-circle"></i>
 </button>
 <button data-planet="saturn" class="control-btn bg-yellow-300 hover:bg-yellow-400" title="土星">
 <i class="fas fa-circle"></i>
 </button>
 <button data-planet="uranus" class="control-btn bg-teal-300 hover:bg-teal-400" title="天王星">
 <i class="fas fa-circle"></i>
 </button>
 <button data-planet="neptune" class="control-btn bg-blue-400 hover:bg-blue-500" title="海王星">
 <i class="fas fa-circle"></i>
 </button>
 <button data-planet="pluto" class="control-btn bg-gray-600 hover:bg-gray-700" title="冥王星">
 <i class="fas fa-circle"></i>
 </button>
 </div>
 </div>
<!-- 行星標籤容器 -->
 <div id="planetLabels"></div>
<!-- 提示工具 -->
 <div id="tooltip" class="tooltip"></div>
 </div>
<script>
 // 模擬加載進度
 let progress = 0;
 const loadingInterval = setInterval(() => {
 progress += Math.random() * 10;
 if (progress > 100) progress = 100;
 document.getElementById('loadingProgress').style.width = `${progress}%`;
if (progress === 100) {
 clearInterval(loadingInterval);
 setTimeout(() => {
 document.querySelector('.loading-screen').style.opacity = '0';
 setTimeout(() => {
 document.querySelector('.loading-screen').style.display = 'none';
 }, 1000);
 }, 500);
 }
 }, 100);
// 初始化Three.js場景
 const scene = new THREE.Scene();
 scene.background = new THREE.Color(0x000000);
// 添加星空背景
 const starsGeometry = new THREE.BufferGeometry();
 const starsMaterial = new THREE.PointsMaterial({
 color: 0xffffff,
 size: 0.05,
 transparent: true,
 opacity: 0.8
 });
const starsVertices = [];
 for (let i = 0; i < 5000; i++) {
 const x = (Math.random() - 0.5) * 2000;
 const y = (Math.random() - 0.5) * 2000;
 const z = (Math.random() - 0.5) * 2000;
 starsVertices.push(x, y, z);
 }
starsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starsVertices, 3));
 const stars = new THREE.Points(starsGeometry, starsMaterial);
 scene.add(stars);
// 相機設置
 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
 camera.position.set(0, 50, 100);
// 渲染器設置
 const renderer = new THREE.WebGLRenderer({ antialias: true });
 renderer.setSize(window.innerWidth, window.innerHeight);
 renderer.shadowMap.enabled = true;
 renderer.shadowMap.type = THREE.PCFSoftShadowMap;
 document.getElementById('container').appendChild(renderer.domElement);
// 光源設置
 const sunLight = new THREE.PointLight(0xffffff, 1.5, 500);
 sunLight.castShadow = true;
 sunLight.shadow.mapSize.width = 2048;
 sunLight.shadow.mapSize.height = 2048;
 sunLight.shadow.bias = -0.0001;
 scene.add(sunLight);
const ambientLight = new THREE.AmbientLight(0x404040);
 scene.add(ambientLight);
// 軌道輔助線
 const orbitHelpers = new THREE.Group();
 scene.add(orbitHelpers);
// 行星數據 (更新為更真實的顏色和參數)
 const planetsData = {
 sun: {
 name: "太陽",
 type: "恆星",
 radius: 6.96,
 distance: 0,
 orbitSpeed: 0,
 rotationSpeed: 0.002,
 color: 0xFDB813,
 tilt: 7.25,
 info: {
 diameter: "1,392,700 km",
 mass: "1.989 × 10³⁰ kg",
 gravity: "274 m/s²",
 orbitPeriod: "N/A",
 rotationPeriod: "25.05 天",
 temperature: "5,500°C",
 moons: "0"
 }
 },
 mercury: {
 name: "水星",
 type: "類地行星",
 radius: 0.244,
 distance: 15,
 orbitSpeed: 0.04,
 rotationSpeed: 0.004,
 color: 0xA9A9A9, // 灰色，接近水星表面顏色
 tilt: 0.034,
 info: {
 diameter: "4,880 km",
 mass: "3.30 × 10²³ kg",
 gravity: "3.7 m/s²",
 orbitPeriod: "88 天",
 rotationPeriod: "58.6 天",
 temperature: "167°C",
 moons: "0"
 }
 },
 venus: {
 name: "金星",
 type: "類地行星",
 radius: 0.605,
 distance: 28,
 orbitSpeed: 0.015,
 rotationSpeed: -0.002, // 逆向自轉
 color: 0xE6E6FA, // 淡黃色，接近金星大氣顏色
 tilt: 177.4,
 info: {
 diameter: "12,104 km",
 mass: "4.87 × 10²⁴ kg",
 gravity: "8.87 m/s²",
 orbitPeriod: "225 天",
 rotationPeriod: "243 天",
 temperature: "464°C",
 moons: "0"
 }
 },
 earth: {
 name: "地球",
 type: "類地行星",
 radius: 0.637,
 distance: 39,
 orbitSpeed: 0.01,
 rotationSpeed: 0.02,
 color: 0x1E90FF, // 藍色，代表海洋
 tilt: 23.44,
 info: {
 diameter: "12,742 km",
 mass: "5.97 × 10²⁴ kg",
 gravity: "9.8 m/s²",
 orbitPeriod: "365.25 天",
 rotationPeriod: "24 小時",
 temperature: "15°C",
 moons: "1 (月球)"
 }
 },
 mars: {
 name: "火星",
 type: "類地行星",
 radius: 0.339,
 distance: 59,
 orbitSpeed: 0.008,
 rotationSpeed: 0.018,
 color: 0xC1440E, // 紅棕色，類似火星表面
 tilt: 25.19,
 info: {
 diameter: "6,779 km",
 mass: "6.39 × 10²³ kg",
 gravity: "3.71 m/s²",
 orbitPeriod: "687 天",
 rotationPeriod: "24.6 小時",
 temperature: "-63°C",
 moons: "2 (火衛一、火衛二)"
 }
 },
 jupiter: {
 name: "木星",
 type: "氣態巨行星",
 radius: 6.99,
 distance: 100,
 orbitSpeed: 0.002,
 rotationSpeed: 0.04,
 color: 0xDAA520, // 金色，類似木星條紋
 tilt: 3.13,
 info: {
 diameter: "139,820 km",
 mass: "1.90 × 10²⁷ kg",
 gravity: "24.79 m/s²",
 orbitPeriod: "4,333 天",
 rotationPeriod: "9.9 小時",
 temperature: "-108°C",
 moons: "79"
 }
 },
 saturn: {
 name: "土星",
 type: "氣態巨行星",
 radius: 5.82,
 distance: 183,
 orbitSpeed: 0.0009,
 rotationSpeed: 0.038,
 color: 0xF5DEB3, // 淡黃色，類似土星雲層
 tilt: 26.73,
 info: {
 diameter: "116,460 km",
 mass: "5.68 × 10²⁶ kg",
 gravity: "10.44 m/s²",
 orbitPeriod: "10,759 天",
 rotationPeriod: "10.7 小時",
 temperature: "-139°C",
 moons: "82"
 }
 },
 uranus: {
 name: "天王星",
 type: "冰巨星",
 radius: 2.54,
 distance: 263,
 orbitSpeed: 0.0004,
 rotationSpeed: 0.03,
 color: 0xAFEEEE, // 淡青色，接近天王星顏色
 tilt: 97.77,
 info: {
 diameter: "50,724 km",
 mass: "8.68 × 10²⁵ kg",
 gravity: "8.69 m/s²",
 orbitPeriod: "30,687 天",
 rotationPeriod: "17.2 小時",
 temperature: "-197°C",
 moons: "27"
 }
 },
 neptune: {
 name: "海王星",
 type: "冰巨星",
 radius: 2.46,
 distance: 320,
 orbitSpeed: 0.0001,
 rotationSpeed: 0.032,
 color: 0x4169E1, // 深藍色，類似海王星
 tilt: 28.32,
 info: {
 diameter: "49,244 km",
 mass: "1.02 × 10²⁶ kg",
 gravity: "11.15 m/s²",
 orbitPeriod: "60,190 天",
 rotationPeriod: "16.1 小時",
 temperature: "-201°C",
 moons: "14"
 }
 },
 pluto: {
 name: "冥王星",
 type: "矮行星",
 radius: 0.118,
 distance: 395,
 orbitSpeed: 0.00006,
 rotationSpeed: 0.01,
 color: 0x808080, // 灰色，類似冥王星表面
 tilt: 122.5,
 info: {
 diameter: "2,377 km",
 mass: "1.30 × 10²² kg",
 gravity: "0.62 m/s²",
 orbitPeriod: "90,560 天",
 rotationPeriod: "6.4 天",
 temperature: "-225°C",
 moons: "5"
 }
 }
 };
// 創建行星
 const planets = {};
 const planetMeshes = {};
 const planetLabels = {};
 let moon = null;
Object.keys(planetsData).forEach(planetName => {
 const planetData = planetsData[planetName];
 const geometry = new THREE.SphereGeometry(planetData.radius, 64, 64);
// 根據行星類型使用不同的材質
 let material;
 if (planetName === 'sun') {
 // 太陽使用發光材質
 material = new THREE.MeshBasicMaterial({
color: planetData.color,
 emissive: planetData.color,
 emissiveIntensity: 1
 });
 } else {
 material = new THREE.MeshPhongMaterial({
color: planetData.color,
 shininess: planetName === 'earth' ? 5 : 10,
 specular: 0x111111
 });
 }
const planet = new THREE.Mesh(geometry, material);
 planet.castShadow = planetName !== 'sun';
 planet.receiveShadow = true;
 planet.userData.name = planetName;
// 設置行星軸傾斜
 planet.rotation.z = planetData.tilt * Math.PI / 180;
if (planetName === 'sun') {
 planet.position.set(0, 0, 0);
 sunLight.position.set(0, 0, 0);
 } else {
 planet.position.set(planetData.distance, 0, 0);
// 創建軌道輔助線
 const orbitGeometry = new THREE.BufferGeometry();
 const orbitMaterial = new THREE.LineBasicMaterial({
color: 0xffffff,
transparent: true,
opacity: 0.3,
 linewidth: 1
 });
const points = [];
 const segments = 256;
 for (let i = 0; i <= segments; i++) {
 const theta = (i / segments) * Math.PI * 2;
 points.push(new THREE.Vector3(
 Math.cos(theta) * planetData.distance,
 0,
 Math.sin(theta) * planetData.distance
 ));
 }
orbitGeometry.setFromPoints(points);
 const orbit = new THREE.Line(orbitGeometry, orbitMaterial);
 orbit.userData.name = planetName;
 orbitHelpers.add(orbit);
// 創建行星標籤
 const label = document.createElement('div');
 label.className = 'planet-label';
 label.textContent = planetData.name;
 label.dataset.planet = planetName;
 document.getElementById('planetLabels').appendChild(label);
 planetLabels[planetName] = label;
 }
scene.add(planet);
 planets[planetName] = planet;
 planetMeshes[planetName] = planet;
// 為土星添加環
 if (planetName === 'saturn') {
 const ringGeometry = new THREE.RingGeometry(planetData.radius * 1.5, planetData.radius * 2.3, 64);
 const ringMaterial = new THREE.MeshPhongMaterial({
 color: 0xD2B48C,
 side: THREE.DoubleSide,
 transparent: true,
 opacity: 0.8,
 shininess: 30
 });
 const ring = new THREE.Mesh(ringGeometry, ringMaterial);
 ring.rotation.x = Math.PI / 2;
 ring.rotation.z = Math.PI / 4;
 planet.add(ring);
 }
 });
// 創建月球
 function createMoon() {
 const moonGeometry = new THREE.SphereGeometry(0.1737, 32, 32); // 月球半徑約為地球的0.27倍
 const moonMaterial = new THREE.MeshPhongMaterial({
color: 0xDDDDDD,
 shininess: 5
 });
moon = new THREE.Mesh(moonGeometry, moonMaterial);
 moon.castShadow = true;
 moon.receiveShadow = true;
 moon.position.set(5, 0, 0); // 初始位置
 planets.earth.add(moon); // 將月球添加為地球的子物體
 }
createMoon();
// 相機控制
 let targetPosition = new THREE.Vector3(0, 50, 100);
 let currentPosition = new THREE.Vector3().copy(targetPosition);
 let targetLookAt = new THREE.Vector3(0, 0, 0);
 let currentLookAt = new THREE.Vector3().copy(targetLookAt);
// 模擬時間
 let simulationSpeed = 1;
 let isPlaying = true;
 let simulationDate = new Date(2023, 0, 1);
// 更新模擬日期顯示
 function updateDateDisplay() {
 const options = { year: 'numeric', month: 'long', day: 'numeric' };
 document.getElementById('simulationDate').textContent = simulationDate.toLocaleDateString('zh-TW', options);
 document.getElementById('simulationTime').textContent = simulationDate.toLocaleTimeString('zh-TW');
 }
// 行星信息面板
 function showPlanetInfo(planetName) {
 const planetData = planetsData[planetName];
 const planetInfo = document.querySelector('.planet-info');
document.getElementById('planetName').textContent = planetData.name;
 document.getElementById('planetType').textContent = planetData.type;
 document.getElementById('planetDiameter').textContent = planetData.info.diameter;
 document.getElementById('planetMass').textContent = planetData.info.mass;
 document.getElementById('planetGravity').textContent = planetData.info.gravity;
 document.getElementById('planetOrbitPeriod').textContent = planetData.info.orbitPeriod;
 document.getElementById('planetRotationPeriod').textContent = planetData.info.rotationPeriod;
 document.getElementById('planetTemperature').textContent = planetData.info.temperature;
 document.getElementById('planetMoons').textContent = planetData.info.moons;
document.getElementById('planetIcon').style.backgroundColor = planetName === 'sun' ?
'#FDB813' : `#${planetData.color.toString(16)}`;
planetInfo.classList.add('active');
 }
// 聚焦行星
 function focusPlanet(planetName) {
 const planet = planets[planetName];
 const planetData = planetsData[planetName];
 const distance = planetName === 'sun' ?
30 :
planetData.distance * 0.7 + planetData.radius * 2;
targetPosition.set(
 planet.position.x,
 planet.position.y + distance * 0.3,
 planet.position.z + distance
 );
targetLookAt.copy(planet.position);
showPlanetInfo(planetName);
 }
// 更新行星標籤位置
 function updateLabels() {
 Object.keys(planetLabels).forEach(planetName => {
 const planet = planets[planetName];
 const label = planetLabels[planetName];
if (!label || !planet) return;
// 將3D坐標轉換為屏幕坐標
 const vector = new THREE.Vector3();
 vector.setFromMatrixPosition(planet.matrixWorld);
 vector.project(camera);
const x = (vector.x * 0.5 + 0.5) * window.innerWidth;
 const y = (vector.y * -0.5 + 0.5) * window.innerHeight;
label.style.left = `${x}px`;
 label.style.top = `${y}px`;
// 根據距離調整標籤大小
 const distance = camera.position.distanceTo(planet.position);
 const scale = Math.min(1, 100 / distance);
 label.style.transform = `translate(-50%, 0) scale(${scale})`;
 });
 }
// 事件監聽器
 document.getElementById('playPauseBtn').addEventListener('click', () => {
 isPlaying = !isPlaying;
 document.getElementById('playPauseBtn').innerHTML = isPlaying ?
'<i class="fas fa-pause"></i>' : '<i class="fas fa-play"></i>';
 });
document.getElementById('speedUpBtn').addEventListener('click', () => {
 simulationSpeed = Math.min(simulationSpeed + 0.5, 10);
 updateSpeedDisplay();
 });
document.getElementById('speedDownBtn').addEventListener('click', () => {
 simulationSpeed = Math.max(simulationSpeed - 0.5, 0.1);
 updateSpeedDisplay();
 });
document.getElementById('resetBtn').addEventListener('click', () => {
 simulationSpeed = 1;
 updateSpeedDisplay();
 simulationDate = new Date(2023, 0, 1);
 updateDateDisplay();
 focusPlanet('sun');
 });
document.getElementById('speedSlider').addEventListener('input', (e) => {
 simulationSpeed = parseFloat(e.target.value);
 updateSpeedDisplay();
 });
document.getElementById('distanceSlider').addEventListener('input', (e) => {
 const value = parseInt(e.target.value);
 document.getElementById('distanceValue').textContent = `${value}%`;
// 調整相機距離
 const baseDistance = 100;
 const newDistance = baseDistance * (value / 100);
 targetPosition.z = newDistance;
 });
document.getElementById('showOrbits').addEventListener('change', (e) => {
 orbitHelpers.visible = e.target.checked;
 });
document.getElementById('showLabels').addEventListener('change', (e) => {
 const labels = document.querySelectorAll('.planet-label');
 labels.forEach(label => {
 if (e.target.checked) {
 label.classList.add('active');
 } else {
 label.classList.remove('active');
 }
 });
 });
document.getElementById('showMoon').addEventListener('change', (e) => {
 if (moon) {
 moon.visible = e.target.checked;
 }
 });
document.getElementById('focusPlanetBtn').addEventListener('click', () => {
 const activePlanet = document.querySelector('.planet-info.active');
 if (activePlanet) {
 const planetName = document.getElementById('planetName').textContent.toLowerCase();
 focusPlanet(planetName);
 }
 });
// 行星選擇按鈕
 document.querySelectorAll('[data-planet]').forEach(btn => {
 btn.addEventListener('click', () => {
 const planetName = btn.getAttribute('data-planet');
 focusPlanet(planetName);
 });
// 添加懸停提示
 btn.addEventListener('mouseenter', () => {
 const tooltip = document.getElementById('tooltip');
 tooltip.textContent = btn.getAttribute('title');
 tooltip.style.left = `${btn.offsetLeft + btn.offsetWidth / 2}px`;
 tooltip.style.top = `${btn.offsetTop - 30}px`;
 tooltip.style.opacity = '1';
 });
btn.addEventListener('mouseleave', () => {
 document.getElementById('tooltip').style.opacity = '0';
 });
 });
// 更新速度顯示
 function updateSpeedDisplay() {
 document.getElementById('speedValue').textContent = `${simulationSpeed.toFixed(1)}x`;
 document.getElementById('speedSlider').value = simulationSpeed;
 }
// 窗口大小調整
 window.addEventListener('resize', () => {
 camera.aspect = window.innerWidth / window.innerHeight;
 camera.updateProjectionMatrix();
 renderer.setSize(window.innerWidth, window.innerHeight);
 });
// 鼠標移動控制
 let mouseX = 0;
 let mouseY = 0;
 let isMouseDown = false;
window.addEventListener('mousedown', () => {
 isMouseDown = true;
 });
window.addEventListener('mouseup', () => {
 isMouseDown = false;
 });
window.addEventListener('mousemove', (e) => {
 mouseX = (e.clientX / window.innerWidth) * 2 - 1;
 mouseY = -(e.clientY / window.innerHeight) * 2 + 1;
if (isMouseDown) {
 targetPosition.x -= mouseX * 2;
 targetPosition.y -= mouseY * 2;
 targetLookAt.x -= mouseX * 2;
 targetLookAt.y -= mouseY * 2;
 }
 });
// 鼠標滾輪縮放
 window.addEventListener('wheel', (e) => {
 e.preventDefault();
 targetPosition.z += e.deltaY * 0.1;
 });
// 點擊選擇行星
 window.addEventListener('click', (e) => {
 if (!isMouseDown) { // 防止拖動時觸發
 const mouse = new THREE.Vector2(
 (e.clientX / window.innerWidth) * 2 - 1,
 -(e.clientY / window.innerHeight) * 2 + 1
 );
const raycaster = new THREE.Raycaster();
 raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(Object.values(planetMeshes));
if (intersects.length > 0) {
 const planet = intersects[0].object;
 focusPlanet(planet.userData.name);
 }
 }
 });
// 動畫循環
 function animate() {
 requestAnimationFrame(animate);
// 平滑相機移動
 currentPosition.lerp(targetPosition, 0.05);
 currentLookAt.lerp(targetLookAt, 0.05);
camera.position.copy(currentPosition);
 camera.lookAt(currentLookAt);
// 更新行星位置和旋轉
 if (isPlaying) {
 Object.keys(planetsData).forEach(planetName => {
 const planetData = planetsData[planetName];
 const planet = planets[planetName];
// 行星自轉
 planet.rotation.y += planetData.rotationSpeed * simulationSpeed;
// 行星公轉 (除了太陽)
 if (planetName !== 'sun') {
 planet.position.x = Math.cos(Date.now() * 0.0001 * planetData.orbitSpeed * simulationSpeed) * planetData.distance;
 planet.position.z = Math.sin(Date.now() * 0.0001 * planetData.orbitSpeed * simulationSpeed) * planetData.distance;
 }
 });
// 月球繞地球公轉
 if (moon) {
 moon.position.x = Math.cos(Date.now() * 0.0005 * simulationSpeed) * 5;
 moon.position.z = Math.sin(Date.now() * 0.0005 * simulationSpeed) * 5;
 moon.rotation.y += 0.001 * simulationSpeed;
 }
// 更新模擬時間
 simulationDate = new Date(simulationDate.getTime() + 3600000 * simulationSpeed);
 updateDateDisplay();
 }
// 更新標籤位置
 updateLabels();
renderer.render(scene, camera);
 }
// 初始顯示太陽信息
 showPlanetInfo('sun');
 updateSpeedDisplay();
 updateDateDisplay();
// 開始動畫
 animate();
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=engerl/sun9" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
</html>