Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Starfield Explorer with Rainbow Stars, UFOs, and Planets</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        let scene, camera, renderer, stars, ufos = [], planets = [];
        let moveSpeed = 0.1;
        let rotateSpeed = 0.02;

        const init = () => {
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            createRainbowStars();
            createUFOs(5);
            createPlanets(3);

            camera.position.z = 5;

            animate();
        };

        const createRainbowStars = () => {
            const geometry = new THREE.BufferGeometry();
            const vertices = [];
            const colors = [];

            for (let i = 0; i < 10000; i++) {
                vertices.push(
                    Math.random() * 600 - 300,
                    Math.random() * 600 - 300,
                    Math.random() * 600 - 300
                );

                colors.push(Math.random(), Math.random(), Math.random());
            }

            geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
            geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

            const material = new THREE.PointsMaterial({
                size: 0.5,
                vertexColors: true
            });

            stars = new THREE.Points(geometry, material);
            scene.add(stars);
        };

        const createUFOs = (count) => {
            const geometry = new THREE.ConeGeometry(1, 0.5, 32);
            const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

            for (let i = 0; i < count; i++) {
                const ufo = new THREE.Mesh(geometry, material);
                ufo.position.set(
                    Math.random() * 100 - 50,
                    Math.random() * 100 - 50,
                    Math.random() * 100 - 50
                );
                ufo.rotation.x = Math.PI; // Flip the cone upside down
                scene.add(ufo);
                ufos.push({
                    mesh: ufo,
                    speed: Math.random() * 0.1 + 0.05,
                    direction: new THREE.Vector3(
                        Math.random() - 0.5,
                        Math.random() - 0.5,
                        Math.random() - 0.5
                    ).normalize()
                });
            }
        };

        const createPlanets = (count) => {
            for (let i = 0; i < count; i++) {
                const geometry = new THREE.SphereGeometry(Math.random() * 5 + 2, 32, 32);
                const material = new THREE.MeshBasicMaterial({
                    color: Math.random() * 0xffffff
                });
                const planet = new THREE.Mesh(geometry, material);
                planet.position.set(
                    Math.random() * 200 - 100,
                    Math.random() * 200 - 100,
                    Math.random() * 200 - 100
                );
                scene.add(planet);
                planets.push(planet);
            }
        };

        const animate = () => {
            requestAnimationFrame(animate);

            // Animate UFOs
            ufos.forEach(ufo => {
                ufo.mesh.position.add(ufo.direction.clone().multiplyScalar(ufo.speed));

                // Bounce off imaginary boundaries
                ['x', 'y', 'z'].forEach(axis => {
                    if (Math.abs(ufo.mesh.position[axis]) > 100) {
                        ufo.direction[axis] *= -1;
                    }
                });

                ufo.mesh.rotation.y += 0.01; // Rotate the UFO
            });

            // Rotate planets
            planets.forEach(planet => {
                planet.rotation.y += 0.005;
            });

            renderer.render(scene, camera);
        };

        const onKeyDown = (event) => {
            switch (event.key) {
                case 'ArrowUp':
                case 'w':
                    camera.position.z -= moveSpeed;
                    break;
                case 'ArrowDown':
                case 's':
                    camera.position.z += moveSpeed;
                    break;
                case 'ArrowLeft':
                case 'a':
                    camera.position.x -= moveSpeed;
                    break;
                case 'ArrowRight':
                case 'd':
                    camera.position.x += moveSpeed;
                    break;
                case 'q':
                    camera.rotation.y += rotateSpeed;
                    break;
                case 'e':
                    camera.rotation.y -= rotateSpeed;
                    break;
                case 'r':
                    camera.position.y += moveSpeed;
                    break;
                case 'f':
                    camera.position.y -= moveSpeed;
                    break;
            }
        };

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

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