<!DOCTYPE html>
<html>

<head>
    <title>Three.js Solar System</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
            /* Black background for space */
        }

        canvas {
            display: block;
        }
    </style>
</head>

<body>
    <!-- Import Three.js and OrbitControls from CDN using full URLs -->
    <script type="module">
        import * as THREE from 'https://unpkg.com/three@latest/build/three.module.js';
        import { OrbitControls } from 'https://unpkg.com/three@latest/examples/jsm/controls/OrbitControls.js';

        // --- Scene ---
        const scene = new THREE.Scene();

        // --- Camera ---
        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 0, 200); // Position camera back

        // --- Renderer ---
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // --- Lighting ---
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.1);
        scene.add(ambientLight);

        const sunLight = new THREE.PointLight(0xffffff, 2); // Light from the Sun
        scene.add(sunLight);

        // --- Astronomical Data (Approximate Average) ---
        const sunRadiusKm = 696340; // km
        const earthRadiusKm = 6371; // km
        const mercuryRadiusKm = 2449; // km
        const sunEarthDistanceKm = 149600000; // km (1 AU)
        const sunMercuryDistanceKm = 57910000; // km

        // --- Scaling Factors (Compromise) ---
        // Size Scaling: Sun Radius = 50 units
        const sunRadiusUnits = 50;
        const sizeScale = sunRadiusUnits / sunRadiusKm;
        const earthRadiusUnits = earthRadiusKm * sizeScale;
        const mercuryRadiusUnits = mercuryRadiusKm * sizeScale;

        // Distance Scaling: Sun-Earth (1 AU) = 50 units
        const sunEarthDistanceUnits = 50;
        const distanceScale = sunEarthDistanceUnits / sunEarthDistanceKm;
        const sunMercuryDistanceUnits = sunMercuryDistanceKm * distanceScale;

        // --- Create Objects ---

        // Sun
        const sunGeometry = new THREE.SphereGeometry(sunRadiusUnits, 64, 64);
        const sunMaterial = new THREE.MeshBasicMaterial({
            color: 0xffd700, // Yellow/Orange color
            emissive: 0xffd700, // Make it glow
            emissiveIntensity: 1.0
        });
        const sun = new THREE.Mesh(sunGeometry, sunMaterial);
        scene.add(sun); // Add Sun to the scene

        // Earth Orbit Group
        const earthOrbitGroup = new THREE.Group();
        earthOrbitGroup.position.set(sunEarthDistanceUnits, 0, 0);
        scene.add(earthOrbitGroup); // Add Earth Orbit Group to the scene

        const earthGeometry = new THREE.SphereGeometry(earthRadiusUnits, 32, 32);
        const earthMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff }); // Blue color
        const earth = new THREE.Mesh(earthGeometry, earthMaterial);
        earthOrbitGroup.add(earth); // Add Earth to its orbit group

        // Mercury Orbit Group
        const mercuryOrbitGroup = new THREE.Group();
        mercuryOrbitGroup.position.set(sunMercuryDistanceUnits, 0, 0);
        scene.add(mercuryOrbitGroup); // Add Mercury Orbit Group to the scene

        const mercuryGeometry = new THREE.SphereGeometry(mercuryRadiusUnits, 32, 32);
        const mercuryMaterial = new THREE.MeshBasicMaterial({ color: 0x808080 }); // Gray color
        const mercury = new THREE.Mesh(mercuryGeometry, mercuryMaterial);
        mercuryOrbitGroup.add(mercury); // Add Mercury to its orbit group

        // --- Controls ---
        const controls = new OrbitControls(camera, renderer.domElement);
        controls.enableZoom = true;
        controls.target.set(0, 0, 0); // Point controls at the Sun
        controls.update();

        // --- Animation Loop ---
        const clock = new THREE.Clock();
        const earthSpeed = 0.01; // Radians per second
        const mercurySpeed = 0.0415; // Radians per second (approx 4.15x faster than Earth)

        function animate() {
            requestAnimationFrame(animate);

            const elapsedTime = clock.getElapsedTime();

            // Rotate orbit groups
            earthOrbitGroup.rotation.y = elapsedTime * earthSpeed;
            mercuryOrbitGroup.rotation.y = elapsedTime * mercurySpeed;

            // Update controls
            controls.update();

            // Render
            renderer.render(scene, camera);
        }

        animate();

        // --- Handle Resize ---
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

    </script>
</body>

</html>
_____________________
I'm getting the following error in the above html file:
______
planets.html:1 Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
_____________
Please help me resolve it.