Hugging Face's logo

Spaces:
engerl
/
sun9
Running

App Files Community
engerl commited on
Commit
3769c90
·
verified ·
1 Parent(s): 34f5037

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +962 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Sun9
3
- emoji: 👁
4
- colorFrom: yellow
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: sun9
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,962 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh-TW">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>3D 太陽系互動模擬器</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/gsap@3.11.4/dist/gsap.min.js"></script>
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <style>
12
+ body {
13
+ margin: 0;
14
+ overflow: hidden;
15
+ font-family: 'Arial', sans-serif;
16
+ color: white;
17
+ }
18
+
19
+ #container {
20
+ position: absolute;
21
+ width: 100%;
22
+ height: 100%;
23
+ }
24
+
25
+ #ui {
26
+ position: absolute;
27
+ top: 0;
28
+ left: 0;
29
+ width: 100%;
30
+ height: 100%;
31
+ pointer-events: none;
32
+ z-index: 10;
33
+ }
34
+
35
+ .panel {
36
+ pointer-events: all;
37
+ background: rgba(0, 0, 0, 0.7);
38
+ border-radius: 10px;
39
+ padding: 15px;
40
+ backdrop-filter: blur(5px);
41
+ border: 1px solid rgba(255, 255, 255, 0.1);
42
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
43
+ }
44
+
45
+ .control-btn {
46
+ background: rgba(255, 255, 255, 0.1);
47
+ border: none;
48
+ color: white;
49
+ border-radius: 50%;
50
+ width: 40px;
51
+ height: 40px;
52
+ display: flex;
53
+ align-items: center;
54
+ justify-content: center;
55
+ cursor: pointer;
56
+ transition: all 0.3s;
57
+ }
58
+
59
+ .control-btn:hover {
60
+ background: rgba(255, 255, 255, 0.3);
61
+ transform: scale(1.1);
62
+ }
63
+
64
+ .planet-info {
65
+ opacity: 0;
66
+ transition: opacity 0.5s;
67
+ }
68
+
69
+ .planet-info.active {
70
+ opacity: 1;
71
+ }
72
+
73
+ .orbit {
74
+ position: absolute;
75
+ border: 1px solid rgba(255, 255, 255, 0.2);
76
+ border-radius: 50%;
77
+ transform-origin: center;
78
+ }
79
+
80
+ .loading-screen {
81
+ position: fixed;
82
+ top: 0;
83
+ left: 0;
84
+ width: 100%;
85
+ height: 100%;
86
+ background: #000;
87
+ display: flex;
88
+ flex-direction: column;
89
+ justify-content: center;
90
+ align-items: center;
91
+ z-index: 100;
92
+ transition: opacity 1s;
93
+ }
94
+
95
+ .loading-bar {
96
+ width: 300px;
97
+ height: 3px;
98
+ background: rgba(255, 255, 255, 0.2);
99
+ margin-top: 20px;
100
+ overflow: hidden;
101
+ }
102
+
103
+ .loading-progress {
104
+ height: 100%;
105
+ background: linear-gradient(90deg, #00d2ff, #3a7bd5);
106
+ width: 0%;
107
+ transition: width 0.3s;
108
+ }
109
+
110
+ .tooltip {
111
+ position: absolute;
112
+ background: rgba(0, 0, 0, 0.8);
113
+ padding: 5px 10px;
114
+ border-radius: 5px;
115
+ font-size: 12px;
116
+ pointer-events: none;
117
+ opacity: 0;
118
+ transition: opacity 0.3s;
119
+ z-index: 20;
120
+ }
121
+
122
+ .star {
123
+ position: absolute;
124
+ background: white;
125
+ border-radius: 50%;
126
+ pointer-events: none;
127
+ }
128
+
129
+ /* 行星標籤 */
130
+ .planet-label {
131
+ position: absolute;
132
+ color: white;
133
+ font-size: 12px;
134
+ text-shadow: 0 0 5px black;
135
+ white-space: nowrap;
136
+ pointer-events: none;
137
+ transform: translate(-50%, 0);
138
+ opacity: 0;
139
+ transition: opacity 0.3s;
140
+ }
141
+
142
+ .planet-label.active {
143
+ opacity: 1;
144
+ }
145
+ </style>
146
+ </head>
147
+ <body>
148
+ <div class="loading-screen">
149
+ <h1 class="text-3xl font-bold mb-4 text-white">太陽系模擬器</h1>
150
+ <p class="text-gray-300 mb-6">正在載入宇宙數據...</p>
151
+ <div class="loading-bar">
152
+ <div class="loading-progress" id="loadingProgress"></div>
153
+ </div>
154
+ </div>
155
+
156
+ <div id="container"></div>
157
+
158
+ <div id="ui">
159
+ <!-- 左上角控制面板 -->
160
+ <div class="panel absolute top-4 left-4 w-64">
161
+ <h2 class="text-xl font-bold mb-4">太陽系控制中心</h2>
162
+ <div class="flex justify-between mb-4">
163
+ <button id="playPauseBtn" class="control-btn">
164
+ <i class="fas fa-play"></i>
165
+ </button>
166
+ <button id="speedDownBtn" class="control-btn">
167
+ <i class="fas fa-backward"></i>
168
+ </button>
169
+ <button id="speedUpBtn" class="control-btn">
170
+ <i class="fas fa-forward"></i>
171
+ </button>
172
+ <button id="resetBtn" class="control-btn">
173
+ <i class="fas fa-redo"></i>
174
+ </button>
175
+ </div>
176
+ <div class="mb-2">
177
+ <label class="block text-sm mb-1">時間流速: <span id="speedValue">1x</span></label>
178
+ <input type="range" id="speedSlider" min="0.1" max="10" step="0.1" value="1" class="w-full">
179
+ </div>
180
+ <div class="mb-2">
181
+ <label class="block text-sm mb-1">視角距離: <span id="distanceValue">100%</span></label>
182
+ <input type="range" id="distanceSlider" min="20" max="200" value="100" class="w-full">
183
+ </div>
184
+ <div class="flex items-center mt-4">
185
+ <input type="checkbox" id="showOrbits" checked class="mr-2">
186
+ <label for="showOrbits" class="text-sm">顯示軌道</label>
187
+ </div>
188
+ <div class="flex items-center mt-2">
189
+ <input type="checkbox" id="showLabels" checked class="mr-2">
190
+ <label for="showLabels" class="text-sm">顯示標籤</label>
191
+ </div>
192
+ <div class="flex items-center mt-2">
193
+ <input type="checkbox" id="showMoon" checked class="mr-2">
194
+ <label for="showMoon" class="text-sm">顯示月球</label>
195
+ </div>
196
+ </div>
197
+
198
+ <!-- 右下角行星信息面板 -->
199
+ <div class="panel absolute bottom-4 right-4 w-72 planet-info">
200
+ <div class="flex items-center mb-3">
201
+ <div id="planetIcon" class="w-10 h-10 rounded-full mr-3"></div>
202
+ <h2 id="planetName" class="text-xl font-bold">行星名稱</h2>
203
+ </div>
204
+ <div class="grid grid-cols-2 gap-2 text-sm">
205
+ <div>
206
+ <div class="text-gray-400">類型</div>
207
+ <div id="planetType">類地行星</div>
208
+ </div>
209
+ <div>
210
+ <div class="text-gray-400">直徑</div>
211
+ <div id="planetDiameter">12,742 km</div>
212
+ </div>
213
+ <div>
214
+ <div class="text-gray-400">質量</div>
215
+ <div id="planetMass">5.97 × 10²⁴ kg</div>
216
+ </div>
217
+ <div>
218
+ <div class="text-gray-400">重力</div>
219
+ <div id="planetGravity">9.8 m/s²</div>
220
+ </div>
221
+ <div>
222
+ <div class="text-gray-400">軌道周期</div>
223
+ <div id="planetOrbitPeriod">365.25 天</div>
224
+ </div>
225
+ <div>
226
+ <div class="text-gray-400">自轉周期</div>
227
+ <div id="planetRotationPeriod">24 小時</div>
228
+ </div>
229
+ <div class="col-span-2">
230
+ <div class="text-gray-400">平均溫度</div>
231
+ <div id="planetTemperature">15°C</div>
232
+ </div>
233
+ <div class="col-span-2">
234
+ <div class="text-gray-400">衛星數量</div>
235
+ <div id="planetMoons">1 (月球)</div>
236
+ </div>
237
+ </div>
238
+ <button id="focusPlanetBtn" class="mt-3 w-full py-2 bg-blue-600 hover:bg-blue-700 rounded transition">
239
+ <i class="fas fa-crosshairs mr-2"></i>聚焦此行星
240
+ </button>
241
+ </div>
242
+
243
+ <!-- 左下角時間顯示 -->
244
+ <div class="panel absolute bottom-4 left-4">
245
+ <div class="text-sm text-gray-400">模擬日期</div>
246
+ <div id="simulationDate" class="text-xl">2023年1月1日</div>
247
+ <div id="simulationTime" class="text-sm">00:00:00</div>
248
+ </div>
249
+
250
+ <!-- 行星選擇按鈕 -->
251
+ <div class="panel absolute top-1/2 right-4 transform -translate-y-1/2">
252
+ <div class="flex flex-col space-y-2">
253
+ <button data-planet="sun" class="control-btn bg-yellow-500 hover:bg-yellow-600" title="太陽">
254
+ <i class="fas fa-sun"></i>
255
+ </button>
256
+ <button data-planet="mercury" class="control-btn bg-gray-400 hover:bg-gray-500" title="水星">
257
+ <i class="fas fa-circle"></i>
258
+ </button>
259
+ <button data-planet="venus" class="control-btn bg-yellow-200 hover:bg-yellow-300" title="金星">
260
+ <i class="fas fa-circle"></i>
261
+ </button>
262
+ <button data-planet="earth" class="control-btn bg-blue-500 hover:bg-blue-600" title="地球">
263
+ <i class="fas fa-circle"></i>
264
+ </button>
265
+ <button data-planet="mars" class="control-btn bg-red-500 hover:bg-red-600" title="火星">
266
+ <i class="fas fa-circle"></i>
267
+ </button>
268
+ <button data-planet="jupiter" class="control-btn bg-yellow-700 hover:bg-yellow-800" title="木星">
269
+ <i class="fas fa-circle"></i>
270
+ </button>
271
+ <button data-planet="saturn" class="control-btn bg-yellow-300 hover:bg-yellow-400" title="土星">
272
+ <i class="fas fa-circle"></i>
273
+ </button>
274
+ <button data-planet="uranus" class="control-btn bg-teal-300 hover:bg-teal-400" title="天王星">
275
+ <i class="fas fa-circle"></i>
276
+ </button>
277
+ <button data-planet="neptune" class="control-btn bg-blue-400 hover:bg-blue-500" title="海王星">
278
+ <i class="fas fa-circle"></i>
279
+ </button>
280
+ <button data-planet="pluto" class="control-btn bg-gray-600 hover:bg-gray-700" title="冥王星">
281
+ <i class="fas fa-circle"></i>
282
+ </button>
283
+ </div>
284
+ </div>
285
+
286
+ <!-- 行星標籤容器 -->
287
+ <div id="planetLabels"></div>
288
+
289
+ <!-- 提示工具 -->
290
+ <div id="tooltip" class="tooltip"></div>
291
+ </div>
292
+
293
+ <script>
294
+ // 模擬加載進度
295
+ let progress = 0;
296
+ const loadingInterval = setInterval(() => {
297
+ progress += Math.random() * 10;
298
+ if (progress > 100) progress = 100;
299
+ document.getElementById('loadingProgress').style.width = `${progress}%`;
300
+
301
+ if (progress === 100) {
302
+ clearInterval(loadingInterval);
303
+ setTimeout(() => {
304
+ document.querySelector('.loading-screen').style.opacity = '0';
305
+ setTimeout(() => {
306
+ document.querySelector('.loading-screen').style.display = 'none';
307
+ }, 1000);
308
+ }, 500);
309
+ }
310
+ }, 100);
311
+
312
+ // 初始化Three.js場景
313
+ const scene = new THREE.Scene();
314
+ scene.background = new THREE.Color(0x000000);
315
+
316
+ // 添加星空背景
317
+ const starsGeometry = new THREE.BufferGeometry();
318
+ const starsMaterial = new THREE.PointsMaterial({
319
+ color: 0xffffff,
320
+ size: 0.05,
321
+ transparent: true,
322
+ opacity: 0.8
323
+ });
324
+
325
+ const starsVertices = [];
326
+ for (let i = 0; i < 5000; i++) {
327
+ const x = (Math.random() - 0.5) * 2000;
328
+ const y = (Math.random() - 0.5) * 2000;
329
+ const z = (Math.random() - 0.5) * 2000;
330
+ starsVertices.push(x, y, z);
331
+ }
332
+
333
+ starsGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starsVertices, 3));
334
+ const stars = new THREE.Points(starsGeometry, starsMaterial);
335
+ scene.add(stars);
336
+
337
+ // 相機設置
338
+ const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
339
+ camera.position.set(0, 50, 100);
340
+
341
+ // 渲染器設置
342
+ const renderer = new THREE.WebGLRenderer({ antialias: true });
343
+ renderer.setSize(window.innerWidth, window.innerHeight);
344
+ renderer.shadowMap.enabled = true;
345
+ renderer.shadowMap.type = THREE.PCFSoftShadowMap;
346
+ document.getElementById('container').appendChild(renderer.domElement);
347
+
348
+ // 光源設置
349
+ const sunLight = new THREE.PointLight(0xffffff, 1.5, 500);
350
+ sunLight.castShadow = true;
351
+ sunLight.shadow.mapSize.width = 2048;
352
+ sunLight.shadow.mapSize.height = 2048;
353
+ sunLight.shadow.bias = -0.0001;
354
+ scene.add(sunLight);
355
+
356
+ const ambientLight = new THREE.AmbientLight(0x404040);
357
+ scene.add(ambientLight);
358
+
359
+ // 軌道輔助線
360
+ const orbitHelpers = new THREE.Group();
361
+ scene.add(orbitHelpers);
362
+
363
+ // 行星數據 (更新為更真實的顏色和參數)
364
+ const planetsData = {
365
+ sun: {
366
+ name: "太陽",
367
+ type: "恆星",
368
+ radius: 6.96,
369
+ distance: 0,
370
+ orbitSpeed: 0,
371
+ rotationSpeed: 0.002,
372
+ color: 0xFDB813,
373
+ tilt: 7.25,
374
+ info: {
375
+ diameter: "1,392,700 km",
376
+ mass: "1.989 × 10³⁰ kg",
377
+ gravity: "274 m/s²",
378
+ orbitPeriod: "N/A",
379
+ rotationPeriod: "25.05 天",
380
+ temperature: "5,500°C",
381
+ moons: "0"
382
+ }
383
+ },
384
+ mercury: {
385
+ name: "水星",
386
+ type: "類地行星",
387
+ radius: 0.244,
388
+ distance: 15,
389
+ orbitSpeed: 0.04,
390
+ rotationSpeed: 0.004,
391
+ color: 0xA9A9A9, // 灰色，接近水星表面顏色
392
+ tilt: 0.034,
393
+ info: {
394
+ diameter: "4,880 km",
395
+ mass: "3.30 × 10²³ kg",
396
+ gravity: "3.7 m/s²",
397
+ orbitPeriod: "88 天",
398
+ rotationPeriod: "58.6 天",
399
+ temperature: "167°C",
400
+ moons: "0"
401
+ }
402
+ },
403
+ venus: {
404
+ name: "金星",
405
+ type: "類地行星",
406
+ radius: 0.605,
407
+ distance: 28,
408
+ orbitSpeed: 0.015,
409
+ rotationSpeed: -0.002, // 逆向自轉
410
+ color: 0xE6E6FA, // 淡黃色，接近金星大氣顏色
411
+ tilt: 177.4,
412
+ info: {
413
+ diameter: "12,104 km",
414
+ mass: "4.87 × 10²⁴ kg",
415
+ gravity: "8.87 m/s²",
416
+ orbitPeriod: "225 天",
417
+ rotationPeriod: "243 天",
418
+ temperature: "464°C",
419
+ moons: "0"
420
+ }
421
+ },
422
+ earth: {
423
+ name: "地球",
424
+ type: "類地行星",
425
+ radius: 0.637,
426
+ distance: 39,
427
+ orbitSpeed: 0.01,
428
+ rotationSpeed: 0.02,
429
+ color: 0x1E90FF, // 藍色，代表海洋
430
+ tilt: 23.44,
431
+ info: {
432
+ diameter: "12,742 km",
433
+ mass: "5.97 × 10²⁴ kg",
434
+ gravity: "9.8 m/s²",
435
+ orbitPeriod: "365.25 天",
436
+ rotationPeriod: "24 小時",
437
+ temperature: "15°C",
438
+ moons: "1 (月球)"
439
+ }
440
+ },
441
+ mars: {
442
+ name: "火星",
443
+ type: "類地行星",
444
+ radius: 0.339,
445
+ distance: 59,
446
+ orbitSpeed: 0.008,
447
+ rotationSpeed: 0.018,
448
+ color: 0xC1440E, // 紅棕色，類似火星表面
449
+ tilt: 25.19,
450
+ info: {
451
+ diameter: "6,779 km",
452
+ mass: "6.39 × 10²³ kg",
453
+ gravity: "3.71 m/s²",
454
+ orbitPeriod: "687 天",
455
+ rotationPeriod: "24.6 小時",
456
+ temperature: "-63°C",
457
+ moons: "2 (火衛一、火衛二)"
458
+ }
459
+ },
460
+ jupiter: {
461
+ name: "木星",
462
+ type: "氣態巨行星",
463
+ radius: 6.99,
464
+ distance: 100,
465
+ orbitSpeed: 0.002,
466
+ rotationSpeed: 0.04,
467
+ color: 0xDAA520, // 金色，類似木星條紋
468
+ tilt: 3.13,
469
+ info: {
470
+ diameter: "139,820 km",
471
+ mass: "1.90 × 10²⁷ kg",
472
+ gravity: "24.79 m/s²",
473
+ orbitPeriod: "4,333 天",
474
+ rotationPeriod: "9.9 小時",
475
+ temperature: "-108°C",
476
+ moons: "79"
477
+ }
478
+ },
479
+ saturn: {
480
+ name: "土星",
481
+ type: "氣態巨行星",
482
+ radius: 5.82,
483
+ distance: 183,
484
+ orbitSpeed: 0.0009,
485
+ rotationSpeed: 0.038,
486
+ color: 0xF5DEB3, // 淡黃色，類似土星雲層
487
+ tilt: 26.73,
488
+ info: {
489
+ diameter: "116,460 km",
490
+ mass: "5.68 × 10²⁶ kg",
491
+ gravity: "10.44 m/s²",
492
+ orbitPeriod: "10,759 天",
493
+ rotationPeriod: "10.7 小時",
494
+ temperature: "-139°C",
495
+ moons: "82"
496
+ }
497
+ },
498
+ uranus: {
499
+ name: "天王星",
500
+ type: "冰巨星",
501
+ radius: 2.54,
502
+ distance: 263,
503
+ orbitSpeed: 0.0004,
504
+ rotationSpeed: 0.03,
505
+ color: 0xAFEEEE, // 淡青色，接近天王星顏色
506
+ tilt: 97.77,
507
+ info: {
508
+ diameter: "50,724 km",
509
+ mass: "8.68 × 10²⁵ kg",
510
+ gravity: "8.69 m/s²",
511
+ orbitPeriod: "30,687 天",
512
+ rotationPeriod: "17.2 小時",
513
+ temperature: "-197°C",
514
+ moons: "27"
515
+ }
516
+ },
517
+ neptune: {
518
+ name: "海王星",
519
+ type: "冰巨星",
520
+ radius: 2.46,
521
+ distance: 320,
522
+ orbitSpeed: 0.0001,
523
+ rotationSpeed: 0.032,
524
+ color: 0x4169E1, // 深藍色，類似海王星
525
+ tilt: 28.32,
526
+ info: {
527
+ diameter: "49,244 km",
528
+ mass: "1.02 × 10²⁶ kg",
529
+ gravity: "11.15 m/s²",
530
+ orbitPeriod: "60,190 天",
531
+ rotationPeriod: "16.1 小時",
532
+ temperature: "-201°C",
533
+ moons: "14"
534
+ }
535
+ },
536
+ pluto: {
537
+ name: "冥王星",
538
+ type: "矮行星",
539
+ radius: 0.118,
540
+ distance: 395,
541
+ orbitSpeed: 0.00006,
542
+ rotationSpeed: 0.01,
543
+ color: 0x808080, // 灰色，類似冥王星表面
544
+ tilt: 122.5,
545
+ info: {
546
+ diameter: "2,377 km",
547
+ mass: "1.30 × 10²² kg",
548
+ gravity: "0.62 m/s²",
549
+ orbitPeriod: "90,560 天",
550
+ rotationPeriod: "6.4 天",
551
+ temperature: "-225°C",
552
+ moons: "5"
553
+ }
554
+ }
555
+ };
556
+
557
+ // 創建行星
558
+ const planets = {};
559
+ const planetMeshes = {};
560
+ const planetLabels = {};
561
+ let moon = null;
562
+
563
+ Object.keys(planetsData).forEach(planetName => {
564
+ const planetData = planetsData[planetName];
565
+ const geometry = new THREE.SphereGeometry(planetData.radius, 64, 64);
566
+
567
+ // 根據行星類型使用不同的材質
568
+ let material;
569
+ if (planetName === 'sun') {
570
+ // 太陽使用發光材質
571
+ material = new THREE.MeshBasicMaterial({
572
+ color: planetData.color,
573
+ emissive: planetData.color,
574
+ emissiveIntensity: 1
575
+ });
576
+ } else {
577
+ material = new THREE.MeshPhongMaterial({
578
+ color: planetData.color,
579
+ shininess: planetName === 'earth' ? 5 : 10,
580
+ specular: 0x111111
581
+ });
582
+ }
583
+
584
+ const planet = new THREE.Mesh(geometry, material);
585
+ planet.castShadow = planetName !== 'sun';
586
+ planet.receiveShadow = true;
587
+ planet.userData.name = planetName;
588
+
589
+ // 設置行星軸傾斜
590
+ planet.rotation.z = planetData.tilt * Math.PI / 180;
591
+
592
+ if (planetName === 'sun') {
593
+ planet.position.set(0, 0, 0);
594
+ sunLight.position.set(0, 0, 0);
595
+ } else {
596
+ planet.position.set(planetData.distance, 0, 0);
597
+
598
+ // 創建軌道輔助線
599
+ const orbitGeometry = new THREE.BufferGeometry();
600
+ const orbitMaterial = new THREE.LineBasicMaterial({
601
+ color: 0xffffff,
602
+ transparent: true,
603
+ opacity: 0.3,
604
+ linewidth: 1
605
+ });
606
+
607
+ const points = [];
608
+ const segments = 256;
609
+ for (let i = 0; i <= segments; i++) {
610
+ const theta = (i / segments) * Math.PI * 2;
611
+ points.push(new THREE.Vector3(
612
+ Math.cos(theta) * planetData.distance,
613
+ 0,
614
+ Math.sin(theta) * planetData.distance
615
+ ));
616
+ }
617
+
618
+ orbitGeometry.setFromPoints(points);
619
+ const orbit = new THREE.Line(orbitGeometry, orbitMaterial);
620
+ orbit.userData.name = planetName;
621
+ orbitHelpers.add(orbit);
622
+
623
+ // 創建行星標籤
624
+ const label = document.createElement('div');
625
+ label.className = 'planet-label';
626
+ label.textContent = planetData.name;
627
+ label.dataset.planet = planetName;
628
+ document.getElementById('planetLabels').appendChild(label);
629
+ planetLabels[planetName] = label;
630
+ }
631
+
632
+ scene.add(planet);
633
+ planets[planetName] = planet;
634
+ planetMeshes[planetName] = planet;
635
+
636
+ // 為土星添加環
637
+ if (planetName === 'saturn') {
638
+ const ringGeometry = new THREE.RingGeometry(planetData.radius * 1.5, planetData.radius * 2.3, 64);
639
+ const ringMaterial = new THREE.MeshPhongMaterial({
640
+ color: 0xD2B48C,
641
+ side: THREE.DoubleSide,
642
+ transparent: true,
643
+ opacity: 0.8,
644
+ shininess: 30
645
+ });
646
+ const ring = new THREE.Mesh(ringGeometry, ringMaterial);
647
+ ring.rotation.x = Math.PI / 2;
648
+ ring.rotation.z = Math.PI / 4;
649
+ planet.add(ring);
650
+ }
651
+ });
652
+
653
+ // 創建月球
654
+ function createMoon() {
655
+ const moonGeometry = new THREE.SphereGeometry(0.1737, 32, 32); // 月球半徑約為地球的0.27倍
656
+ const moonMaterial = new THREE.MeshPhongMaterial({
657
+ color: 0xDDDDDD,
658
+ shininess: 5
659
+ });
660
+
661
+ moon = new THREE.Mesh(moonGeometry, moonMaterial);
662
+ moon.castShadow = true;
663
+ moon.receiveShadow = true;
664
+ moon.position.set(5, 0, 0); // 初始位置
665
+ planets.earth.add(moon); // 將月球添加為地球的子物體
666
+ }
667
+
668
+ createMoon();
669
+
670
+ // 相機控制
671
+ let targetPosition = new THREE.Vector3(0, 50, 100);
672
+ let currentPosition = new THREE.Vector3().copy(targetPosition);
673
+ let targetLookAt = new THREE.Vector3(0, 0, 0);
674
+ let currentLookAt = new THREE.Vector3().copy(targetLookAt);
675
+
676
+ // 模擬時間
677
+ let simulationSpeed = 1;
678
+ let isPlaying = true;
679
+ let simulationDate = new Date(2023, 0, 1);
680
+
681
+ // 更新模擬日期顯示
682
+ function updateDateDisplay() {
683
+ const options = { year: 'numeric', month: 'long', day: 'numeric' };
684
+ document.getElementById('simulationDate').textContent = simulationDate.toLocaleDateString('zh-TW', options);
685
+ document.getElementById('simulationTime').textContent = simulationDate.toLocaleTimeString('zh-TW');
686
+ }
687
+
688
+ // 行星信息面板
689
+ function showPlanetInfo(planetName) {
690
+ const planetData = planetsData[planetName];
691
+ const planetInfo = document.querySelector('.planet-info');
692
+
693
+ document.getElementById('planetName').textContent = planetData.name;
694
+ document.getElementById('planetType').textContent = planetData.type;
695
+ document.getElementById('planetDiameter').textContent = planetData.info.diameter;
696
+ document.getElementById('planetMass').textContent = planetData.info.mass;
697
+ document.getElementById('planetGravity').textContent = planetData.info.gravity;
698
+ document.getElementById('planetOrbitPeriod').textContent = planetData.info.orbitPeriod;
699
+ document.getElementById('planetRotationPeriod').textContent = planetData.info.rotationPeriod;
700
+ document.getElementById('planetTemperature').textContent = planetData.info.temperature;
701
+ document.getElementById('planetMoons').textContent = planetData.info.moons;
702
+
703
+ document.getElementById('planetIcon').style.backgroundColor = planetName === 'sun' ?
704
+ '#FDB813' : `#${planetData.color.toString(16)}`;
705
+
706
+ planetInfo.classList.add('active');
707
+ }
708
+
709
+ // 聚焦行星
710
+ function focusPlanet(planetName) {
711
+ const planet = planets[planetName];
712
+ const planetData = planetsData[planetName];
713
+ const distance = planetName === 'sun' ?
714
+ 30 :
715
+ planetData.distance * 0.7 + planetData.radius * 2;
716
+
717
+ targetPosition.set(
718
+ planet.position.x,
719
+ planet.position.y + distance * 0.3,
720
+ planet.position.z + distance
721
+ );
722
+
723
+ targetLookAt.copy(planet.position);
724
+
725
+ showPlanetInfo(planetName);
726
+ }
727
+
728
+ // 更新行星標籤位置
729
+ function updateLabels() {
730
+ Object.keys(planetLabels).forEach(planetName => {
731
+ const planet = planets[planetName];
732
+ const label = planetLabels[planetName];
733
+
734
+ if (!label || !planet) return;
735
+
736
+ // 將3D坐標轉換為屏幕坐標
737
+ const vector = new THREE.Vector3();
738
+ vector.setFromMatrixPosition(planet.matrixWorld);
739
+ vector.project(camera);
740
+
741
+ const x = (vector.x * 0.5 + 0.5) * window.innerWidth;
742
+ const y = (vector.y * -0.5 + 0.5) * window.innerHeight;
743
+
744
+ label.style.left = `${x}px`;
745
+ label.style.top = `${y}px`;
746
+
747
+ // 根據距離調整標籤大小
748
+ const distance = camera.position.distanceTo(planet.position);
749
+ const scale = Math.min(1, 100 / distance);
750
+ label.style.transform = `translate(-50%, 0) scale(${scale})`;
751
+ });
752
+ }
753
+
754
+ // 事件監聽器
755
+ document.getElementById('playPauseBtn').addEventListener('click', () => {
756
+ isPlaying = !isPlaying;
757
+ document.getElementById('playPauseBtn').innerHTML = isPlaying ?
758
+ '<i class="fas fa-pause"></i>' : '<i class="fas fa-play"></i>';
759
+ });
760
+
761
+ document.getElementById('speedUpBtn').addEventListener('click', () => {
762
+ simulationSpeed = Math.min(simulationSpeed + 0.5, 10);
763
+ updateSpeedDisplay();
764
+ });
765
+
766
+ document.getElementById('speedDownBtn').addEventListener('click', () => {
767
+ simulationSpeed = Math.max(simulationSpeed - 0.5, 0.1);
768
+ updateSpeedDisplay();
769
+ });
770
+
771
+ document.getElementById('resetBtn').addEventListener('click', () => {
772
+ simulationSpeed = 1;
773
+ updateSpeedDisplay();
774
+ simulationDate = new Date(2023, 0, 1);
775
+ updateDateDisplay();
776
+ focusPlanet('sun');
777
+ });
778
+
779
+ document.getElementById('speedSlider').addEventListener('input', (e) => {
780
+ simulationSpeed = parseFloat(e.target.value);
781
+ updateSpeedDisplay();
782
+ });
783
+
784
+ document.getElementById('distanceSlider').addEventListener('input', (e) => {
785
+ const value = parseInt(e.target.value);
786
+ document.getElementById('distanceValue').textContent = `${value}%`;
787
+
788
+ // 調整相機距離
789
+ const baseDistance = 100;
790
+ const newDistance = baseDistance * (value / 100);
791
+ targetPosition.z = newDistance;
792
+ });
793
+
794
+ document.getElementById('showOrbits').addEventListener('change', (e) => {
795
+ orbitHelpers.visible = e.target.checked;
796
+ });
797
+
798
+ document.getElementById('showLabels').addEventListener('change', (e) => {
799
+ const labels = document.querySelectorAll('.planet-label');
800
+ labels.forEach(label => {
801
+ if (e.target.checked) {
802
+ label.classList.add('active');
803
+ } else {
804
+ label.classList.remove('active');
805
+ }
806
+ });
807
+ });
808
+
809
+ document.getElementById('showMoon').addEventListener('change', (e) => {
810
+ if (moon) {
811
+ moon.visible = e.target.checked;
812
+ }
813
+ });
814
+
815
+ document.getElementById('focusPlanetBtn').addEventListener('click', () => {
816
+ const activePlanet = document.querySelector('.planet-info.active');
817
+ if (activePlanet) {
818
+ const planetName = document.getElementById('planetName').textContent.toLowerCase();
819
+ focusPlanet(planetName);
820
+ }
821
+ });
822
+
823
+ // 行星選擇按鈕
824
+ document.querySelectorAll('[data-planet]').forEach(btn => {
825
+ btn.addEventListener('click', () => {
826
+ const planetName = btn.getAttribute('data-planet');
827
+ focusPlanet(planetName);
828
+ });
829
+
830
+ // 添加懸停提示
831
+ btn.addEventListener('mouseenter', () => {
832
+ const tooltip = document.getElementById('tooltip');
833
+ tooltip.textContent = btn.getAttribute('title');
834
+ tooltip.style.left = `${btn.offsetLeft + btn.offsetWidth / 2}px`;
835
+ tooltip.style.top = `${btn.offsetTop - 30}px`;
836
+ tooltip.style.opacity = '1';
837
+ });
838
+
839
+ btn.addEventListener('mouseleave', () => {
840
+ document.getElementById('tooltip').style.opacity = '0';
841
+ });
842
+ });
843
+
844
+ // 更新速度顯示
845
+ function updateSpeedDisplay() {
846
+ document.getElementById('speedValue').textContent = `${simulationSpeed.toFixed(1)}x`;
847
+ document.getElementById('speedSlider').value = simulationSpeed;
848
+ }
849
+
850
+ // 窗口大小調整
851
+ window.addEventListener('resize', () => {
852
+ camera.aspect = window.innerWidth / window.innerHeight;
853
+ camera.updateProjectionMatrix();
854
+ renderer.setSize(window.innerWidth, window.innerHeight);
855
+ });
856
+
857
+ // 鼠標移動控制
858
+ let mouseX = 0;
859
+ let mouseY = 0;
860
+ let isMouseDown = false;
861
+
862
+ window.addEventListener('mousedown', () => {
863
+ isMouseDown = true;
864
+ });
865
+
866
+ window.addEventListener('mouseup', () => {
867
+ isMouseDown = false;
868
+ });
869
+
870
+ window.addEventListener('mousemove', (e) => {
871
+ mouseX = (e.clientX / window.innerWidth) * 2 - 1;
872
+ mouseY = -(e.clientY / window.innerHeight) * 2 + 1;
873
+
874
+ if (isMouseDown) {
875
+ targetPosition.x -= mouseX * 2;
876
+ targetPosition.y -= mouseY * 2;
877
+ targetLookAt.x -= mouseX * 2;
878
+ targetLookAt.y -= mouseY * 2;
879
+ }
880
+ });
881
+
882
+ // 鼠標滾輪縮放
883
+ window.addEventListener('wheel', (e) => {
884
+ e.preventDefault();
885
+ targetPosition.z += e.deltaY * 0.1;
886
+ });
887
+
888
+ // 點擊選擇行星
889
+ window.addEventListener('click', (e) => {
890
+ if (!isMouseDown) { // 防止拖動時觸發
891
+ const mouse = new THREE.Vector2(
892
+ (e.clientX / window.innerWidth) * 2 - 1,
893
+ -(e.clientY / window.innerHeight) * 2 + 1
894
+ );
895
+
896
+ const raycaster = new THREE.Raycaster();
897
+ raycaster.setFromCamera(mouse, camera);
898
+
899
+ const intersects = raycaster.intersectObjects(Object.values(planetMeshes));
900
+
901
+ if (intersects.length > 0) {
902
+ const planet = intersects[0].object;
903
+ focusPlanet(planet.userData.name);
904
+ }
905
+ }
906
+ });
907
+
908
+ // 動畫循環
909
+ function animate() {
910
+ requestAnimationFrame(animate);
911
+
912
+ // 平滑相機移動
913
+ currentPosition.lerp(targetPosition, 0.05);
914
+ currentLookAt.lerp(targetLookAt, 0.05);
915
+
916
+ camera.position.copy(currentPosition);
917
+ camera.lookAt(currentLookAt);
918
+
919
+ // 更新行星位置和旋轉
920
+ if (isPlaying) {
921
+ Object.keys(planetsData).forEach(planetName => {
922
+ const planetData = planetsData[planetName];
923
+ const planet = planets[planetName];
924
+
925
+ // 行星自轉
926
+ planet.rotation.y += planetData.rotationSpeed * simulationSpeed;
927
+
928
+ // 行星公轉 (除了太陽)
929
+ if (planetName !== 'sun') {
930
+ planet.position.x = Math.cos(Date.now() * 0.0001 * planetData.orbitSpeed * simulationSpeed) * planetData.distance;
931
+ planet.position.z = Math.sin(Date.now() * 0.0001 * planetData.orbitSpeed * simulationSpeed) * planetData.distance;
932
+ }
933
+ });
934
+
935
+ // 月球繞地球公轉
936
+ if (moon) {
937
+ moon.position.x = Math.cos(Date.now() * 0.0005 * simulationSpeed) * 5;
938
+ moon.position.z = Math.sin(Date.now() * 0.0005 * simulationSpeed) * 5;
939
+ moon.rotation.y += 0.001 * simulationSpeed;
940
+ }
941
+
942
+ // 更新模擬時間
943
+ simulationDate = new Date(simulationDate.getTime() + 3600000 * simulationSpeed);
944
+ updateDateDisplay();
945
+ }
946
+
947
+ // 更新標籤位置
948
+ updateLabels();
949
+
950
+ renderer.render(scene, camera);
951
+ }
952
+
953
+ // 初始顯示太陽信息
954
+ showPlanetInfo('sun');
955
+ updateSpeedDisplay();
956
+ updateDateDisplay();
957
+
958
+ // 開始動畫
959
+ animate();
960
+ </script>
961
+ <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>
962
+ </html>