地理课堂小游戏

沉浸式 3D 互动体验，探索地球自转、公转与大气层的奥秘。
点击下方卡片即可开启互动教学。

课题一

地球自转与昼夜交替

探究地球自转产生的昼夜交替现象。在真实的 3D 地球模型上观察太阳光照与晨昏线的变化。

课题二

地球公转与时间

观察地球围绕太阳公转的物理过程，通过动态仪表盘直观感受公转一圈与“一年”的时间关系。

课题三

地球公转与四季变化

探索黄赤交角与四季更替的奥秘。随地球公转轨道，观测太阳直射点的移动与春夏秋冬的流转。

课题四

大气层结构与层级

了解包裹地球的五个大气圈层。通过分离发光的 3D 球体，逐一解析对流层至散逸层的物理特征。

课题五

鸟类与对流层

深入地球的“呼吸区”。在广阔的 3D 云层天空中，与拍打翅膀飞翔的鸟群一起，体验对流层作为生命乐园的魅力。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地理课堂互动：地球自转与昼夜交替</title>
    <script src="https://cdn.tailwindcss.com"></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;
            background-color: #0f172a;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

#canvas-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 1;
            opacity: 0;
            pointer-events: none;
            transition: opacity 1.5s ease-in-out;
        }

#ui-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.5s ease-in-out;
        }

.option-btn {
            transition: all 0.2s ease;
        }

.option-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }

.shake {
            animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
        }

@keyframes shake {
            10%, 90% {
                transform: translate3d(-1px, 0, 0);
            }

20%, 80% {
                transform: translate3d(2px, 0, 0);
            }

30%, 50%, 70% {
                transform: translate3d(-4px, 0, 0);
            }

40%, 60% {
                transform: translate3d(4px, 0, 0);
            }
        }

#info-overlay {
            position: absolute;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 20;
            background: rgba(15, 23, 42, 0.8);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            padding: 20px 30px;
            border-radius: 16px;
            text-align: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 1s ease-in-out;
            transition-delay: 1s;
        }
</style>
    <script type="importmap">
        { "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js", "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/" } }
        </script>
</head>
<body>
    <div id="ui-layer">
    <div class="bg-white rounded-2xl shadow-2xl max-w-2xl w-full mx-4 overflow-hidden" id="quiz-card">
    <div class="bg-blue-600 text-white p-6 text-center">
    <h1 class="text-2xl font-bold flex items-center justify-center gap-2"><i class="fas fa-globe-asia"></i> 趣味地理小测验</h1>
    <p class="text-blue-100 mt-2">开动脑筋，选择正确的答案吧！</p>
            </div>
    <div class="p-8">
    <h2 class="text-xl text-gray-800 font-semibold mb-6 leading-relaxed">下列现象中，主要由地球<span class="text-blue-600 border-b-2 border-blue-600 mx-1 pb-1">自转</span>产生的是（    ）</h2>
    <div class="space-y-4" id="options-container">
    <button class="option-btn w-full text-left p-4 rounded-xl border-2 border-gray-200 hover:border-blue-400 hover:bg-blue-50 text-gray-700 font-medium flex items-center gap-4" data-value="A"><span class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 font-bold">A</span>四季更替</button>
    <button class="option-btn w-full text-left p-4 rounded-xl border-2 border-gray-200 hover:border-blue-400 hover:bg-blue-50 text-gray-700 font-medium flex items-center gap-4" data-value="B"><span class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 font-bold">B</span>昼夜交替</button>
    <button class="option-btn w-full text-left p-4 rounded-xl border-2 border-gray-200 hover:border-blue-400 hover:bg-blue-50 text-gray-700 font-medium flex items-center gap-4" data-value="C"><span class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 font-bold">C</span>五带划分</button>
    <button class="option-btn w-full text-left p-4 rounded-xl border-2 border-gray-200 hover:border-blue-400 hover:bg-blue-50 text-gray-700 font-medium flex items-center gap-4" data-value="D"><span class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 font-bold">D</span>昼夜长短变化</button>
                </div>
    <div id="feedback" class="mt-6 text-center hidden font-bold rounded-lg p-3"></div>
            </div>
        </div>
    </div>
    <div id="info-overlay">
    <h3 class="text-2xl font-bold text-yellow-400 mb-2">回答正确！这就是昼夜交替现象</h3>
    <p class="text-gray-200 text-lg max-w-3xl">地球是一个不发光且不透明的球体，同一时间太阳只能照亮地球的一半。<br>向着太阳的半球是<span class="text-yellow-300 font-bold">白昼</span>，背着太阳的半球是<span class="text-blue-300 font-bold">黑夜</span>。<br>随着地球不停地自转，昼夜也就不断地交替。</p>
    <button id="reset-btn" class="mt-4 px-6 py-2 bg-white/20 hover:bg-white/30 rounded-full text-white transition-colors border border-white/50"><i class="fas fa-undo mr-2"></i>再玩一次</button>
    </div>
    <div id="canvas-container"></div>
    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const options = document.querySelectorAll('.option-btn');
        const feedback = document.getElementById('feedback');
        const uiLayer = document.getElementById('ui-layer');
        const canvasContainer = document.getElementById('canvas-container');
        const infoOverlay = document.getElementById('info-overlay');
        const resetBtn = document.getElementById('reset-btn');
        let is3DSceneActive = false;

options.forEach(btn => {
            btn.addEventListener('click', () => {
                const answer = btn.getAttribute('data-value');
                options.forEach(o => { o.classList.remove('border-red-500', 'bg-red-50', 'border-green-500', 'bg-green-50', 'shake'); o.querySelector('span').classList.remove('bg-red-500', 'text-white', 'bg-green-500'); o.querySelector('span').classList.add('bg-gray-100', 'text-gray-600'); });
                if (answer === 'B') {
                    btn.classList.add('border-green-500', 'bg-green-50'); btn.querySelector('span').classList.remove('bg-gray-100', 'text-gray-600'); btn.querySelector('span').classList.add('bg-green-500', 'text-white');
                    feedback.innerHTML = '<i class="fas fa-check-circle mr-2"></i>回答正确！即将进入演示环节...'; feedback.className = 'mt-6 text-center font-bold rounded-lg p-3 bg-green-100 text-green-700 block';
                    setTimeout(() => { start3DVisualization(); }, 1500);
                } else {
                    btn.classList.add('border-red-500', 'bg-red-50', 'shake'); btn.querySelector('span').classList.remove('bg-gray-100', 'text-gray-600'); btn.querySelector('span').classList.add('bg-red-500', 'text-white');
                    const explanations = { 'A': '四季更替主要由地球公转产生哦。', 'C': '五带划分主要由地球公转及黄赤交角产生。', 'D': '昼夜长短变化也是主要由地球公转产生的。' };
                    feedback.innerHTML = `<i class="fas fa-times-circle mr-2"></i>回答错误。${explanations[answer]} 再想想！`; feedback.className = 'mt-6 text-center font-bold rounded-lg p-3 bg-red-100 text-red-700 block';
                    setTimeout(() => { btn.classList.remove('shake'); }, 500);
                }
            });
        });

resetBtn.addEventListener('click', () => {
            canvasContainer.style.opacity = '0'; canvasContainer.style.pointerEvents = 'none'; infoOverlay.style.opacity = '0'; infoOverlay.style.pointerEvents = 'none'; uiLayer.style.opacity = '1'; uiLayer.style.pointerEvents = 'auto';
            feedback.classList.add('hidden');
            options.forEach(o => { o.classList.remove('border-red-500', 'bg-red-50', 'border-green-500', 'bg-green-50', 'shake'); o.querySelector('span').classList.remove('bg-red-500', 'text-white', 'bg-green-500'); o.querySelector('span').classList.add('bg-gray-100', 'text-gray-600'); });
            is3DSceneActive = false;
        });

let scene, camera, renderer, earthGroup, earthMesh, controls;
        function init3D() {
            if (scene) return;
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 0, 20);
            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.shadowMap.enabled = true;
            canvasContainer.appendChild(renderer.domElement);
            controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.enablePan = false;
            earthGroup = new THREE.Group(); scene.add(earthGroup);
            const textureLoader = new THREE.TextureLoader();
            const earthGeometry = new THREE.SphereGeometry(5, 64, 64);
            const earthMaterial = new THREE.MeshPhongMaterial({ map: textureLoader.load('https://cdn.jsdelivr.net/npm/three-globe/example/img/earth-blue-marble.jpg'), bumpMap: textureLoader.load('https://cdn.jsdelivr.net/npm/three-globe/example/img/earth-topology.png'), bumpScale: 0.1, specular: new THREE.Color('grey'), shininess: 10 });
            earthMesh = new THREE.Mesh(earthGeometry, earthMaterial); earthGroup.rotation.z = 23.5 * Math.PI / 180; earthGroup.add(earthMesh);
            const atmosphereGeometry = new THREE.SphereGeometry(5.1, 64, 64);
            const atmosphereMaterial = new THREE.MeshPhongMaterial({ color: 0x00aaff, transparent: true, opacity: 0.15, side: THREE.BackSide, blending: THREE.AdditiveBlending });
            const atmosphere = new THREE.Mesh(atmosphereGeometry, atmosphereMaterial); earthGroup.add(atmosphere);
            const ambientLight = new THREE.AmbientLight(0x404040, 0.5); scene.add(ambientLight);
            const sunLight = new THREE.DirectionalLight(0xffffff, 3); sunLight.position.set(20, 0, 5); scene.add(sunLight);
            const sunGeom = new THREE.SphereGeometry(1, 32, 32); const sunMat = new THREE.MeshBasicMaterial({ color: 0xffdd44 }); const sunSphere = new THREE.Mesh(sunGeom, sunMat); sunSphere.position.copy(sunLight.position); scene.add(sunSphere);
            createStars(); window.addEventListener('resize', onWindowResize, false); animate();
        }

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地理课堂互动：地球公转与时间</title>
    <script src="https://cdn.tailwindcss.com"></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;
            background-color: #0f172a;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

#canvas-container, #ui-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
        }

#canvas-container {
            z-index: 1;
            opacity: 0;
            pointer-events: none;
            transition: opacity 1.5s ease-in-out;
        }

#ui-layer {
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.5s ease-in-out;
        }

.option-btn {
            transition: all 0.2s ease;
        }

.option-btn:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            }

.shake {
            animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
        }

@keyframes shake {
            10%, 90% {
                transform: translate3d(-1px, 0, 0);
            }

20%, 80% {
                transform: translate3d(2px, 0, 0);
            }

30%, 50%, 70% {
                transform: translate3d(-4px, 0, 0);
            }

40%, 60% {
                transform: translate3d(4px, 0, 0);
            }
        }

#time-hud {
            position: absolute;
            top: 40px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 20;
            background: rgba(15, 23, 42, 0.85);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            padding: 20px 40px;
            border-radius: 20px;
            text-align: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 1s;
            width: 80%;
            max-width: 600px;
        }

.progress-bar-container {
            width: 100%;
            height: 12px;
            background-color: rgba(255,255,255,0.1);
            border-radius: 10px;
            margin-top: 15px;
            overflow: hidden;
            position: relative;
        }

#progress-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #3b82f6, #10b981);
            border-radius: 10px;
            transition: width 0.1s linear;
        }

.year-complete-animation {
            animation: pulse-glow 2s infinite;
        }

@keyframes pulse-glow {
            0%, 100% {
                box-shadow: 0 0 10px rgba(16,185,129,0.5);
                border-color: rgba(16,185,129,0.5);
            }

50% {
                box-shadow: 0 0 30px rgba(16,185,129,0.9);
                border-color: rgba(16,185,129,1);
            }
        }
</style>
    <script type="importmap"> { "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js", "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/" } } </script>
</head>
<body>
    <div id="ui-layer">
    <div class="bg-white rounded-2xl shadow-2xl max-w-2xl w-full mx-4 overflow-hidden" id="quiz-card">
    <div class="bg-blue-600 text-white p-6 text-center">
    <h1 class="text-2xl font-bold flex items-center justify-center gap-2"><i class="fas fa-clock"></i> 地理时间探索测验</h1>
    <p class="text-blue-100 mt-2">选出正确答案，开启时光之旅！</p>
            </div>
    <div class="p-8">
    <h2 class="text-xl text-gray-800 font-semibold mb-6 leading-relaxed">地球公转一周所需时间为（    ）</h2>
    <div class="space-y-4" id="options-container">
    <button class="option-btn w-full text-left p-4 rounded-xl border-2 border-gray-200 hover:bg-blue-50 text-gray-700 font-medium flex items-center gap-4" data-value="A"><span class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 font-bold">A</span>一年</button>
    <button class="option-btn w-full text-left p-4 rounded-xl border-2 border-gray-200 hover:bg-blue-50 text-gray-700 font-medium flex items-center gap-4" data-value="B"><span class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 font-bold">B</span>一天</button>
                </div>
    <div id="feedback" class="mt-6 text-center hidden font-bold rounded-lg p-3"></div>
            </div>
        </div>
    </div>
    <div id="time-hud">
    <div class="flex justify-between items-center mb-2"><span class="text-gray-300 text-lg"><i class="fas fa-route"></i> 绕日飞行中...</span><span id="month-display" class="text-3xl font-bold text-yellow-400">1 个月</span></div>
    <div class="progress-bar-container"><div id="progress-fill"></div></div>
    <div id="year-complete-msg" class="hidden mt-4 text-2xl font-bold text-green-400"><i class="fas fa-check-circle"></i> 完成一周公转，历时整整一年！</div>
    </div>
    <div id="info-overlay">
    <p class="text-gray-200 text-lg max-w-3xl mb-4">地球不仅围绕地轴自转（导致昼夜交替，用时一天），<br>同时还在太空中沿着椭圆轨道围绕<span class="text-yellow-400 font-bold">太阳公转</span>。<br>绕太阳跑完这漫长的一圈，我们就度过了<span class="text-green-400 font-bold text-xl">一整年 (约365天)</span>。</p>
    <button id="reset-btn" class="px-8 py-2 bg-blue-600 hover:bg-blue-500 rounded-full text-white transition-colors font-bold shadow-lg"><i class="fas fa-undo mr-2"></i>返回答题</button>
    </div>
    <div id="canvas-container"></div>
    <script type="module">
        import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
        const options = document.querySelectorAll('.option-btn'); const feedback = document.getElementById('feedback'); const uiLayer = document.getElementById('ui-layer'); const canvasContainer = document.getElementById('canvas-container'); const infoOverlay = document.getElementById('info-overlay'); const timeHud = document.getElementById('time-hud'); const resetBtn = document.getElementById('reset-btn'); const monthDisplay = document.getElementById('month-display'); const progressFill = document.getElementById('progress-fill'); const yearCompleteMsg = document.getElementById('year-complete-msg');
        let is3DSceneActive = false;
        options.forEach(btn => {
            btn.addEventListener('click', () => {
                const answer = btn.getAttribute('data-value');
                options.forEach(o => { o.classList.remove('border-red-500', 'bg-red-50', 'border-green-500', 'bg-green-50', 'shake'); o.querySelector('span').classList.remove('bg-red-500', 'text-white', 'bg-green-500'); o.querySelector('span').classList.add('bg-gray-100', 'text-gray-600'); });
                if (answer === 'A') {
                    btn.classList.add('border-green-500', 'bg-green-50'); btn.querySelector('span').classList.remove('bg-gray-100', 'text-gray-600'); btn.querySelector('span').classList.add('bg-green-500', 'text-white');
                    feedback.innerHTML = '<i class="fas fa-rocket mr-2"></i>回答正确！带你感受时间与空间的旅程...'; feedback.className = 'mt-6 text-center font-bold rounded-lg p-3 bg-green-100 text-green-700 block';
                    setTimeout(() => { start3DVisualization(); }, 1500);
                } else {
                    btn.classList.add('border-red-500', 'bg-red-50', 'shake'); btn.querySelector('span').classList.remove('bg-gray-100', 'text-gray-600'); btn.querySelector('span').classList.add('bg-red-500', 'text-white');
                    feedback.innerHTML = `<i class="fas fa-times-circle mr-2"></i>回答错误。一天是地球“自转”一周的时间，再想想！`; feedback.className = 'mt-6 text-center font-bold rounded-lg p-3 bg-red-100 text-red-700 block';
                    setTimeout(() => { btn.classList.remove('shake'); }, 500);
                }
            });
        });
        resetBtn.addEventListener('click', () => {
            canvasContainer.style.opacity = '0'; canvasContainer.style.pointerEvents = 'none'; infoOverlay.style.opacity = '0'; infoOverlay.style.pointerEvents = 'none'; timeHud.style.opacity = '0'; timeHud.style.pointerEvents = 'none'; uiLayer.style.opacity = '1'; uiLayer.style.pointerEvents = 'auto';
            feedback.classList.add('hidden');
            options.forEach(o => { o.classList.remove('border-red-500', 'bg-red-50', 'border-green-500', 'bg-green-50', 'shake'); o.querySelector('span').classList.remove('bg-red-500', 'text-white', 'bg-green-500'); o.querySelector('span').classList.add('bg-gray-100', 'text-gray-600'); });
            is3DSceneActive = false;
        });
        let scene, camera, renderer, controls, earthSystem, earthMesh;
        let orbitAngle = 0; const orbitRadius = 16; const orbitSpeed = 0.006; let hasCompletedYear = false;
        function init3D() {
            if (scene) { resetOrbitState(); return; }
            scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 20, 35);
            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); canvasContainer.appendChild(renderer.domElement);
            controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.enablePan = false;
            const sunGeom = new THREE.SphereGeometry(3.5, 32, 32); const sunMat = new THREE.MeshBasicMaterial({ color: 0xffdd44 }); const sunSphere = new THREE.Mesh(sunGeom, sunMat); scene.add(sunSphere);
            const pointLight = new THREE.PointLight(0xffffff, 800, 0); scene.add(pointLight); const ambientLight = new THREE.AmbientLight(0x404040, 1.5); scene.add(ambientLight);
            const orbitCurve = new THREE.EllipseCurve(0, 0, orbitRadius, orbitRadius, 0, 2 * Math.PI, false, 0); const orbitPoints = orbitCurve.getPoints(100); const orbitGeom = new THREE.BufferGeometry().setFromPoints(orbitPoints); const orbitMat = new THREE.LineBasicMaterial({ color: 0x55aaff, transparent: true, opacity: 0.3 }); const orbitLine = new THREE.Line(orbitGeom, orbitMat); orbitLine.rotation.x = Math.PI / 2; scene.add(orbitLine);
            earthSystem = new THREE.Group(); scene.add(earthSystem);
            const earthTiltGroup = new THREE.Group(); earthTiltGroup.rotation.z = -23.5 * Math.PI / 180; earthSystem.add(earthTiltGroup);
            const textureLoader = new THREE.TextureLoader(); const earthGeometry = new THREE.SphereGeometry(1.5, 64, 64);
            const earthMaterial = new THREE.MeshPhongMaterial({ map: textureLoader.load('https://cdn.jsdelivr.net/npm/three-globe/example/img/earth-blue-marble.jpg'), bumpMap: textureLoader.load('https://cdn.jsdelivr.net/npm/three-globe/example/img/earth-topology.png'), bumpScale: 0.08, specular: new THREE.Color('grey'), shininess: 15 });
            earthMesh = new THREE.Mesh(earthGeometry, earthMaterial); earthTiltGroup.add(earthMesh);
            createStars(); window.addEventListener('resize', onWindowResize, false); animate();
        }
        function createStars() {
            const starGeometry = new THREE.BufferGeometry(); const starCount = 2000; const posArray = new Float32Array(starCount * 3);
            for (let i = 0; i < starCount * 3; i++) { posArray[i] = (Math.random() - 0.5) * 150; }
            starGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3)); const starMaterial = new THREE.PointsMaterial({ size: 0.08, color: 0xffffff, transparent: true, opacity: 0.8 }); const stars = new THREE.Points(starGeometry, starMaterial); scene.add(stars);
        }
        function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }
        function resetOrbitState() { orbitAngle = 0; hasCompletedYear = false; timeHud.classList.remove('year-complete-animation'); yearCompleteMsg.classList.add('hidden'); progressFill.style.width = '0%'; monthDisplay.innerText = '1 个月'; monthDisplay.classList.remove('text-green-400'); monthDisplay.classList.add('text-yellow-400'); }
        function updateTimeHUD() {
            const totalRadians = Math.abs(orbitAngle); const oneRevolutionRadians = 2 * Math.PI; let progressRatio = totalRadians / oneRevolutionRadians; if (progressRatio >= 1) progressRatio = 1;
            progressFill.style.width = (progressRatio * 100) + '%';
            let currentMonth = Math.floor(progressRatio * 12) + 1; if (currentMonth > 12) currentMonth = 12;
            if (progressRatio < 1) { monthDisplay.innerText = `${currentMonth} 个月`; }
            if (progressRatio >= 1 && !hasCompletedYear) { hasCompletedYear = true; monthDisplay.innerText = `12 个月 (一年!)`; monthDisplay.classList.remove('text-yellow-400'); monthDisplay.classList.add('text-green-400'); yearCompleteMsg.classList.remove('hidden'); timeHud.classList.add('year-complete-animation'); }
        }
        function animate() { requestAnimationFrame(animate); if (!is3DSceneActive) return; orbitAngle -= orbitSpeed; if (earthSystem) { earthSystem.position.x = orbitRadius * Math.cos(orbitAngle); earthSystem.position.z = orbitRadius * Math.sin(orbitAngle); } if (earthMesh) { earthMesh.rotation.y += 0.05; } updateTimeHUD(); controls.update(); renderer.render(scene, camera); }
        function start3DVisualization() { is3DSceneActive = true; init3D(); uiLayer.style.opacity = '0'; uiLayer.style.pointerEvents = 'none'; canvasContainer.style.opacity = '1'; canvasContainer.style.pointerEvents = 'auto'; infoOverlay.style.opacity = '1'; infoOverlay.style.pointerEvents = 'auto'; timeHud.style.opacity = '1'; timeHud.style.pointerEvents = 'auto'; }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地理课堂互动：地球公转与四季变化</title>
    <script src="https://cdn.tailwindcss.com"></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;
            background-color: #0f172a;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }