three.js 旋转的地球

效果演示
源码使用说明
主要源码如下：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Rotating Earth</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            display: block;
        }
    </style>
</head>
<body>
<script src="three.min.js"></script>

<script>
    // Step 1: Create the scene, camera, and renderer
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // Step 2: Load Earth texture
    const loader = new THREE.TextureLoader();
    const earthTexture = loader.load('earth_atmos_2048.jpg');

    // Step 3: Create Earth geometry and material
    const earthGeometry = new THREE.SphereGeometry(1, 64, 64);
    const earthMaterial = new THREE.MeshBasicMaterial({map: earthTexture});

    // Step 4: Create Earth mesh and add it to the scene
    const earthMesh = new THREE.Mesh(earthGeometry, earthMaterial);
    scene.add(earthMesh);

    // Step 5: Position the camera and light
    camera.position.z = 3;

    // Step 6: Set up animation loop
    function animate() {
        requestAnimationFrame(animate);

        // Rotate the Earth around its Y-axis
        earthMesh.rotation.y += 0.001;

        renderer.render(scene, camera);
    }

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