deepseek生成8大行星3d动画

![](https://resource.maoshu.fun/storage/default/20251104/PixPin_2025-11-9514b5d39efc6f882be7e09bb2cc044d699592d3.png?e=1775231097&token=Ov7mXAv_8azPtTTXXyhh0S5qpDFEhafGpHARTAg2:2hqSS8CFaOlV8Zm0NfGmm64nfJk=)

提示词：
```
我是一名初中地理老师，要做一个教学使用的3d动画，来演示太阳系8大行星的运动规律，动画要求：
1.轨道清晰可见，鼠标拖动可以查看不同视角；
2.可以点击按钮进行加速和减速，可以暂停和开始动画
3.以中文小字显示行星名称，名称竖向排列，始终紧随星球，但是不能挡住星球
4.点击名称可以查看星球相关知识
5.操作按钮尽量小，并且全部并排显示在底部，不要遮挡主要内容。
6.有清屏按钮，点击后可隐藏所有操作视图（除了本按钮外），再次点击可显示
要求使用three.js开发，生成单个html文件
```

代码：
```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>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            overflow: hidden;
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #000;
            color: white;
        }
        
        #container {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
        
        #controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
            padding: 10px;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 8px;
            transition: all 0.3s ease;
            z-index: 100;
        }
        
        .control-btn {
            background-color: rgba(30, 30, 70, 0.8);
            color: white;
            border: 1px solid #4a6ee0;
            border-radius: 4px;
            padding: 8px 12px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s;
        }
        
        .control-btn:hover {
            background-color: rgba(50, 50, 120, 0.9);
            transform: scale(1.05);
        }
        
        #clear-screen {
            position: absolute;
            bottom: 20px;
            right: 20px;
            z-index: 101;
        }
        
        .planet-label {
            color: white;
            font-size: 12px;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            position: absolute;
            pointer-events: auto;
            cursor: pointer;
            text-shadow: 0 0 3px black;
            z-index: 10;
        }
        
        #info-panel {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 300px;
            background-color: rgba(0, 0, 0, 0.7);
            border: 1px solid #4a6ee0;
            border-radius: 8px;
            padding: 15px;
            display: none;
            z-index: 100;
        }
        
        #info-panel h3 {
            color: #4a6ee0;
            margin-bottom: 10px;
            border-bottom: 1px solid #4a6ee0;
            padding-bottom: 5px;
        }
        
        #info-panel p {
            margin-bottom: 8px;
            line-height: 1.4;
        }
        
        #info-close {
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            color: white;
            cursor: pointer;
            font-size: 16px;
        }
        
        #loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 18px;
            color: white;
        }
        
        .hidden {
            display: none !important;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    
    <div id="controls">
        <button id="speed-down" class="control-btn">减速</button>
        <button id="pause" class="control-btn">暂停</button>
        <button id="play" class="control-btn">开始</button>
        <button id="speed-up" class="control-btn">加速</button>
        <button id="reset-view" class="control-btn">重置视角</button>
    </div>
    
    <button id="clear-screen" class="control-btn">清屏</button>
    
    <div id="info-panel">
        <button id="info-close">×</button>
        <h3 id="info-title">行星信息</h3>
        <div id="info-content"></div>
    </div>
    
    <div id="loading">正在加载太阳系模型...</div>

// 全局变量
        let scene, camera, renderer, controls;
        let planets = [];
        let labels = [];
        let rings = [];
        let animationId;
        let timeScale = 1;
        let isAnimating = true;
        let isControlsVisible = true;

// 初始化场景
        function init() {
            // 创建场景
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x000011);
            
            // 创建相机
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.z = 500;
            
            // 创建渲染器
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.getElementById('container').appendChild(renderer.domElement);
            
            // 添加轨道控制器
            controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.enableDamping = true;
            controls.dampingFactor = 0.05;
            
            // 添加光源
            const ambientLight = new THREE.AmbientLight(0x333333);
            scene.add(ambientLight);
            
            const sunLight = new THREE.PointLight(0xffffff, 2, 1000);
            scene.add(sunLight);
            
            // 创建太阳
            const sunGeometry = new THREE.SphereGeometry(40, 32, 32);
            const sunMaterial = new THREE.MeshBasicMaterial({ 
                color: 0xffff00,
                emissive: 0xffff00,
                emissiveIntensity: 0.5
            });
            const sun = new THREE.Mesh(sunGeometry, sunMaterial);
            scene.add(sun);
            
            // 添加太阳光晕效果
            const sunGlowGeometry = new THREE.SphereGeometry(45, 32, 32);
            const sunGlowMaterial = new THREE.MeshBasicMaterial({
                color: 0xffff00,
                transparent: true,
                opacity: 0.2
            });
            const sunGlow = new THREE.Mesh(sunGlowGeometry, sunGlowMaterial);
            scene.add(sunGlow);
            
            // 创建行星和轨道
            planetData.forEach(data => {
                // 创建轨道组 - 用于实现轨道倾角
                const orbitGroup = new THREE.Group();
                
                // 创建轨道
                const orbitGeometry = new THREE.RingGeometry(data.distance - 0.5, data.distance + 0.5, 128);
                const orbitMaterial = new THREE.MeshBasicMaterial({ 
                    color: 0x88aaff,
                    side: THREE.DoubleSide,
                    transparent: true,
                    opacity: 0.5
                });
                const orbit = new THREE.Mesh(orbitGeometry, orbitMaterial);
                orbit.rotation.x = Math.PI / 2;
                orbitGroup.add(orbit);
                
                // 应用轨道倾角
                orbitGroup.rotation.z = data.inclination;
                
                // 创建行星
                const geometry = new THREE.SphereGeometry(data.radius, 32, 32);
                const material = new THREE.MeshPhongMaterial({ color: data.color });
                const planet = new THREE.Mesh(geometry, material);
                
                // 设置行星位置
                planet.position.x = data.distance;
                planet.userData = { 
                    name: data.name,
                    radius: data.radius,
                    distance: data.distance,
                    speed: data.speed,
                    inclination: data.inclination,
                    angle: Math.random() * Math.PI * 2,
                    info: data.info
                };
                
                orbitGroup.add(planet);
                scene.add(orbitGroup);
                planets.push({
                    mesh: planet,
                    group: orbitGroup
                });
                
                // 创建星环（如果有）
                if (data.hasRing) {
                    const ringGeometry = new THREE.RingGeometry(data.ringInnerRadius, data.ringOuterRadius, 64);
                    const ringMaterial = new THREE.MeshBasicMaterial({ 
                        color: data.ringColor,
                        side: THREE.DoubleSide,
                        transparent: true,
                        opacity: 0.7
                    });
                    const ring = new THREE.Mesh(ringGeometry, ringMaterial);
                    ring.rotation.x = Math.PI / 2;
                    
                    // 将环添加到行星上，这样它会随着行星一起运动
                    planet.add(ring);
                    rings.push(ring);
                }
                
                // 创建标签
                const label = document.createElement('div');
                label.className = 'planet-label';
                label.textContent = data.name;
                label.style.position = 'absolute';
                label.style.userSelect = 'none';
                
                // 添加点击事件
                label.addEventListener('click', () => {
                    showPlanetInfo(data.name, data.info);
                });
                
                document.body.appendChild(label);
                labels.push({
                    element: label,
                    planet: planet
                });
            });
            
            // 添加星星背景
            addStars();
            
            // 隐藏加载提示
            document.getElementById('loading').classList.add('hidden');
            
            // 开始动画循环
            animate();
            
            // 添加窗口大小调整监听
            window.addEventListener('resize', onWindowResize);
            
            // 添加控制按钮事件
            setupControls();
        }
        
        // 添加星星背景
        function addStars() {
            const starGeometry = new THREE.BufferGeometry();
            const starCount = 5000;
            const positions = new Float32Array(starCount * 3);
            
            for (let i = 0; i < starCount * 3; i++) {
                positions[i] = (Math.random() - 0.5) * 2000;
            }
            
            starGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
            
            const starMaterial = new THREE.PointsMaterial({
                color: 0xffffff,
                size: 1,
                transparent: true
            });
            
            const stars = new THREE.Points(starGeometry, starMaterial);
            scene.add(stars);
        }
        
        // 动画循环
        function animate() {
            animationId = requestAnimationFrame(animate);
            
            if (isAnimating) {
                // 更新行星位置
                planets.forEach(item => {
                    const planet = item.mesh;
                    const group = item.group;
                    const data = planet.userData;
                    
                    // 更新行星角度
                    data.angle += data.speed * timeScale;
                    
                    // 计算行星在轨道上的位置
                    const x = Math.cos(data.angle) * data.distance;
                    const z = Math.sin(data.angle) * data.distance;
                    
                    // 应用轨道倾角
                    group.rotation.z = data.inclination;
                    
                    // 设置行星位置
                    planet.position.set(x, 0, z);
                });
                
                // 更新标签位置
                updateLabels();
            }
            
            controls.update();
            renderer.render(scene, camera);
        }
        
        // 更新标签位置
        function updateLabels() {
            labels.forEach(item => {
                const planet = item.planet;
                const label = item.element;
                
                // 将3D坐标转换为屏幕坐标
                const vector = planet.getWorldPosition(new THREE.Vector3());
                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 + 15}px`;
                label.style.top = `${y}px`;
                
                // 如果行星在相机后面，隐藏标签
                label.style.display = vector.z > 1 ? 'none' : 'block';
            });
        }
        
        // 窗口大小调整
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
        
        // 设置控制按钮
        function setupControls() {
            document.getElementById('speed-down').addEventListener('click', () => {
                timeScale = Math.max(0.1, timeScale - 0.5);
            });
            
            document.getElementById('speed-up').addEventListener('click', () => {
                timeScale = Math.min(10, timeScale + 0.5);
            });
            
            document.getElementById('pause').addEventListener('click', () => {
                isAnimating = false;
            });
            
            document.getElementById('play').addEventListener('click', () => {
                isAnimating = true;
            });
            
            document.getElementById('reset-view').addEventListener('click', () => {
                camera.position.set(0, 0, 500);
                controls.reset();
            });
            
            document.getElementById('clear-screen').addEventListener('click', () => {
                isControlsVisible = !isControlsVisible;
                const controlsDiv = document.getElementById('controls');
                if (isControlsVisible) {
                    controlsDiv.classList.remove('hidden');
                } else {
                    controlsDiv.classList.add('hidden');
                }
            });
            
            document.getElementById('info-close').addEventListener('click', () => {
                document.getElementById('info-panel').style.display = 'none';
            });
        }
        
        // 显示行星信息
        function showPlanetInfo(name, info) {
            document.getElementById('info-title').textContent = name;
            document.getElementById('info-content').innerHTML = `<p>${info}</p>`;
            document.getElementById('info-panel').style.display = 'block';
        }
        
        // 初始化
        init();
    </script>
</body>
</html>
```