爱好其实是一种惩罚
纪念我的放肆-消失的那么快
当前位置：首页 > 精品源码 > 正文

太阳系八大行星运行模拟(HTML网页增强版)

作者：冲灵 发布时间：2025-08-30 23:33 分类： 精品源码 浏览：27 评论：0

导读：使用说明 1. 这个HTML文件创建了一个交互式的太阳系3D模型，展示八大行星围绕太阳运行的状态。 2. 功能特点： •按住鼠标右键并拖动可以旋转视角 •...

使用说明

  1. 1.

    这个HTML文件创建了一个交互式的太阳系3D模型，展示八大行星围绕太阳运行的状态。

  2. 2.

    功能特点：

    • •按住鼠标右键并拖动可以旋转视角
    • •使用鼠标滚轮可以缩放视图
    • •行星按照不同的速度绕太阳运行
    • •地球有月球环绕，土星有光环
    • •星空背景增强宇宙感
  3. 3.

    要使用此网页，只需将代码保存为HTML文件并在浏览器中打开即可。

  4. 4.

    注意：此网页需要互联网连接来加载Three.js库。

  5. 可以复制代码到http://linghu.n26n.com/happy/HTML/这里演示观看！
  6. <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>太阳系八大行星运行模拟(增强版)</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
            color: white;
            font-family: Arial, sans-serif;
        }
        canvas {
            display: block;
        }
        #info {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 10px;
            border-radius: 5px;
            max-width: 300px;
        }
        #title {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2.5em;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 20px;
            border-radius: 10px;
            animation: fadeOut 5s forwards;
        }
        #speed-control {
            position: absolute;
            bottom: 20px;
            right: 20px;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 10px;
            border-radius: 5px;
        }
        #planet-info {
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            padding: 20px;
            border-radius: 10px;
            max-width: 300px;
            display: none;
        }
        @keyframes fadeOut {
            0% { opacity: 1; }
            80% { opacity: 1; }
            100% { opacity: 0; display: none; }
        }
    </style>
</head>
<body>
    <div id="info">
        <h2>太阳系八大行星</h2>
        <p>按住鼠标右键拖动可以旋转视角</p>
        <p>使用滚轮可以缩放</p>
        <p>鼠标悬停行星查看详细信息</p>
    </div>
    <div id="title">
        <h1>深邃宇宙中的太阳系</h1>
        <p>探索我们家园星系的壮丽运行</p>
    </div>
    <div id="speed-control">
        <label for="speed-slider">旋转速度:</label>
        <input type="range" id="speed-slider" min="0.1" max="2" step="0.1" value="0.5">
        <span id="speed-value">0.5x</span>
    </div>
    <div id="planet-info">
        <h2 id="planet-name"></h2>
        <p id="planet-desc"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
    <script>
        // 场景设置
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0x000000);

        // 相机设置
        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);
        document.body.appendChild(renderer.domElement);

        // 轨道控制器
        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.dampingFactor = 0.05;
        controls.screenSpacePanning = false;
        controls.minDistance = 50;
        controls.maxDistance = 500;

        // 添加环境光和方向光
        const ambientLight = new THREE.AmbientLight(0x404040);
        scene.add(ambientLight);

        const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(0, 0, 0);
        scene.add(directionalLight);

        // 创建太阳和行星
        const sunGeometry = new THREE.SphereGeometry(5, 32, 32);
        const sunMaterial = new THREE.MeshBasicMaterial({
            color: 0xffff00,
            emissive: 0xffff00,
            emissiveIntensity: 1
        });
        const sun = new THREE.Mesh(sunGeometry, sunMaterial);
        scene.add(sun);

        // 太阳光晕效果
        const sunLight = new THREE.PointLight(0xffff00, 1, 100);
        sun.add(sunLight);

        // 行星百科数据
        const planetInfoData = {
            "水星": "水星是太阳系中最小的行星，也是离太阳最近的行星。它的表面布满了陨石坑，没有大气层，昼夜温差极大。",
            "金星": "金星是太阳系中最热的行星，有着浓厚的大气层，主要由二氧化碳组成。它的自转方向与大多数行星相反。",
            "地球": "地球是我们居住的行星，是目前已知唯一存在生命的星球。它有一个固态的内核和液态的外核，产生了保护性的磁场。",
            "火星": "火星被称为红色行星，表面有大量的氧化铁。它是太阳系中与地球最相似的行星，有季节变化和极地冰冠。",
            "木星": "木星是太阳系中最大的行星，是一个气态巨行星。它有着著名的大红斑风暴，已经持续了至少400年。",
            "土星": "土星以其壮观的环系统而闻名，主要由冰和岩石碎片组成。它也是一个气态巨行星，密度比水还低。",
            "天王星": "天王星是一个冰巨星，自转轴几乎与轨道平面平行，看起来像是侧着旋转。它的大气层主要含有氢和氦。",
            "海王星": "海王星是太阳系中最远的行星，有着强烈的风暴系统。它是通过数学预测而非直接观测发现的第一颗行星。"
        };

        // 行星数据
        const planets = [
            { name: "水星", color: 0xaaaaaa, radius: 0.4, distance: 15, speed: 0.004 },
            { name: "金星", color: 0xffcc99, radius: 0.6, distance: 25, speed: 0.0015 },
            { name: "地球", color: 0x1a66ff, radius: 0.6, distance: 35, speed: 0.001 },
            { name: "火星", color: 0xff3300, radius: 0.5, distance: 45, speed: 0.0008 },
            { name: "木星", color: 0xff9966, radius: 1.4, distance: 65, speed: 0.0004 },
            { name: "土星", color: 0xcc9900, radius: 1.2, distance: 85, speed: 0.0002 },
            { name: "天王星", color: 0x66ccff, radius: 0.9, distance: 105, speed: 0.0001 },
            { name: "海王星", color: 0x3366ff, radius: 0.8, distance: 125, speed: 0.00006 }
        ];

        // 创建行星
        const planetMeshes = [];
        const planetOrbits = [];
        let hoveredPlanet = null;
        let speedFactor = 0.5;

        planets.forEach((planet, index) => {
            // 行星
            const geometry = new THREE.SphereGeometry(planet.radius, 32, 32);
            const material = new THREE.MeshPhongMaterial({ 
                color: planet.color,
                emissive: planet.color,
                emissiveIntensity: 0.1
            });
            const mesh = new THREE.Mesh(geometry, material);
            mesh.position.x = planet.distance;
            mesh.userData.name = planet.name;
            planetMeshes.push({ mesh, planet });

            // 轨道
            const orbitGeometry = new THREE.RingGeometry(planet.distance - 0.1, planet.distance + 0.1, 64);
            const orbitMaterial = new THREE.MeshBasicMaterial({ 
                color: 0x333333, 
                side: THREE.DoubleSide,
                transparent: true,
                opacity: 0.3
            });
            const orbit = new THREE.Mesh(orbitGeometry, orbitMaterial);
            orbit.rotation.x = Math.PI / 2;
            planetOrbits.push(orbit);

            scene.add(mesh);
            scene.add(orbit);

            // 为地球添加月球
            if (index === 2) {
                const moonGeometry = new THREE.SphereGeometry(0.2, 32, 32);
                const moonMaterial = new THREE.MeshPhongMaterial({ color: 0xcccccc });
                const moon = new THREE.Mesh(moonGeometry, moonMaterial);
                moon.position.x = 2;
                mesh.add(moon);

                // 月球动画
                function animateMoon() {
                    moon.rotation.y += 0.01;
                    requestAnimationFrame(animateMoon);
                }
                animateMoon();
            }

            // 为土星添加光环
            if (index === 5) {
                const ringGeometry = new THREE.RingGeometry(1.5, 2.2, 32);
                const ringMaterial = new THREE.MeshPhongMaterial({
                    color: 0xcc9900,
                    side: THREE.DoubleSide
                });
                const ring = new THREE.Mesh(ringGeometry, ringMaterial);
                ring.rotation.x = Math.PI / 2;
                ring.rotation.z = Math.PI / 10;
                mesh.add(ring);
            }
        });

        // 添加星空背景
        const starGeometry = new THREE.BufferGeometry();
        const starMaterial = new THREE.PointsMaterial({
            color: 0xffffff,
            size: 0.1,
            transparent: true,
            opacity: 0.8
        });

        const starVertices = [];
        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;
            starVertices.push(x, y, z);
        }

        starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3));
        const stars = new THREE.Points(starGeometry, starMaterial);
        scene.add(stars);

        // 鼠标交互
        const raycaster = new THREE.Raycaster();
        const mouse = new THREE.Vector2();

        function onMouseMove(event) {
            // 计算鼠标在归一化设备坐标中的位置
            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

            // 更新射线投射器
            raycaster.setFromCamera(mouse, camera);

            // 计算与行星的交点
            const intersects = raycaster.intersectObjects(planetMeshes.map(p => p.mesh));

            if (intersects.length > 0) {
                const planet = intersects[0].object;
                if (planet.userData.name !== hoveredPlanet) {
                    hoveredPlanet = planet.userData.name;
                    showPlanetInfo(planet.userData.name);
                }
            } else {
                if (hoveredPlanet !== null) {
                    hoveredPlanet = null;
                    hidePlanetInfo();
                }
            }
        }

        function showPlanetInfo(name) {
            document.getElementById('planet-name').textContent = name;
            document.getElementById('planet-desc').textContent = planetInfoData[name];
            document.getElementById('planet-info').style.display = 'block';
        }

        function hidePlanetInfo() {
            document.getElementById('planet-info').style.display = 'none';
        }

        window.addEventListener('mousemove', onMouseMove, false);

        // 速度控制
        const speedSlider = document.getElementById('speed-slider');
        const speedValue = document.getElementById('speed-value');

        speedSlider.addEventListener('input', function() {
            speedFactor = parseFloat(this.value);
            speedValue.textContent = this.value + 'x';
        });

        // 动画循环
        function animate() {
            requestAnimationFrame(animate);

            // 旋转太阳
            sun.rotation.y += 0.005 * speedFactor;

            // 行星运动
            planetMeshes.forEach((obj, index) => {
                if (hoveredPlanet !== obj.mesh.userData.name) {
                    const angle = Date.now() * obj.planet.speed * speedFactor;
                    obj.mesh.position.x = Math.cos(angle) * obj.planet.distance;
                    obj.mesh.position.z = Math.sin(angle) * obj.planet.distance;
                    obj.mesh.rotation.y += 0.01 * speedFactor;
                }
            });

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

        // 窗口大小调整
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

        animate();
    </script>
</body>
</html>
×

如果觉得文章对您有用，请随意打赏。
您的支持是我们继续创作的动力！

微信打赏

微信扫一扫

支付宝打赏

支付宝扫一扫

手机扫码阅读

资源下载

暂无下载资源

标签：

相关文章

发表评论:

精品源码排行

个人资料

冲灵的头像
冲灵

跳动时间

搜索

最新文章

热门文章

最新评论

powered by emlog pro，Theme By 天兴工作室

© 2025 灵狐的窝. All rights reserved.