3D GPU Particle Galaxy & Black Hole Physics Sandbox

<!DOCTYPE html>
<html lang="en" class="h-full dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D GPU Particle Galaxy & Gravity Black Hole Sandbox - Three.js</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <style>
        body { margin: 0; background: #02040a; overflow: hidden; font-family: 'Inter', sans-serif; }
        #particleCanvas { width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
    </style>
</head>
<body class="h-screen text-white flex flex-col select-none">

    <!-- Top Sandbox Header -->
    <header class="h-14 bg-slate-900/90 backdrop-blur-md border-b border-slate-800 px-4 sm:px-6 flex items-center justify-between z-20">
        <div class="flex items-center gap-3">
            <span class="w-9 h-9 rounded-xl bg-gradient-to-tr from-purple-500 to-cyan-500 flex items-center justify-center text-lg shadow-lg">🌌</span>
            <div>
                <h1 class="font-bold text-sm sm:text-base text-white">3D GPU Particle Galaxy & Black Hole Physics Sandbox</h1>
                <p class="text-[10px] text-cyan-400 font-mono">12,000+ Interactive Three.js Particles • Real-Time Attractor Morphing</p>
            </div>
        </div>
        <div class="text-xs font-mono text-purple-400">
            <span>12,000 PARTICLES @ 60 FPS</span>
        </div>
    </header>

    <div class="flex-1 flex flex-col md:flex-row relative overflow-hidden">
        <!-- 3D Viewport -->
        <div class="flex-1 relative">
            <canvas id="particleCanvas"></canvas>
            <div class="absolute bottom-4 left-4 bg-slate-900/80 backdrop-blur-md border border-slate-800 px-4 py-2 rounded-2xl text-xs text-slate-300 pointer-events-none">
                ✨ Drag to Orbit 360° • Switch 3D Attractor Formations in the Physics Panel
            </div>
        </div>

        <!-- Physics Control Sidebar -->
        <div class="w-full md:w-80 bg-slate-900/95 border-t md:border-t-0 md:border-l border-slate-800 p-5 space-y-5 z-20">
            <div>
                <label class="text-xs font-bold uppercase tracking-wider text-cyan-400 block mb-2.5">🌀 3D Particle Formation</label>
                <div class="grid grid-cols-2 gap-2">
                    <button onclick="morphTo('galaxy')" class="py-2 px-3 rounded-xl bg-cyan-500/20 border border-cyan-500/40 text-cyan-300 text-xs font-bold">Spiral Galaxy</button>
                    <button onclick="morphTo('torus')" class="py-2 px-3 rounded-xl bg-purple-500/20 border border-purple-500/40 text-purple-300 text-xs font-bold">Quantum Torus</button>
                    <button onclick="morphTo('sphere')" class="py-2 px-3 rounded-xl bg-amber-500/20 border border-amber-500/40 text-amber-300 text-xs font-bold">Supernova Core</button>
                    <button onclick="morphTo('wave')" class="py-2 px-3 rounded-xl bg-emerald-500/20 border border-emerald-500/40 text-emerald-300 text-xs font-bold">Harmonic Field</button>
                </div>
            </div>

            <div>
                <label class="text-xs font-bold uppercase tracking-wider text-amber-400 block mb-2">⚡ Vortex Spin Velocity</label>
                <input type="range" id="spinSpeed" min="0" max="3" step="0.1" value="1" class="w-full accent-cyan-400">
            </div>

            <div>
                <label class="text-xs font-bold uppercase tracking-wider text-purple-400 block mb-2.5">🎨 Spectral Color Palette</label>
                <div class="grid grid-cols-3 gap-2">
                    <button onclick="setPalette(0x22d3ee, 0xa855f7)" class="py-2 rounded-xl bg-slate-800 text-cyan-300 text-xs font-bold">Nebula</button>
                    <button onclick="setPalette(0xf97316, 0xf43f5e)" class="py-2 rounded-xl bg-slate-800 text-amber-300 text-xs font-bold">Solar Flare</button>
                    <button onclick="setPalette(0x10b981, 0x3b82f6)" class="py-2 rounded-xl bg-slate-800 text-emerald-300 text-xs font-bold">Aurora</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        const COUNT = 12000;
        const canvas = document.getElementById('particleCanvas');
        const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(50, 1, 0.1, 200);
        camera.position.set(0, 8, 16);
        camera.lookAt(0, 0, 0);

        const geo = new THREE.BufferGeometry();
        const positions = new Float32Array(COUNT * 3);
        const targets = new Float32Array(COUNT * 3);
        const colors = new Float32Array(COUNT * 3);

        const c1 = new THREE.Color(0x22d3ee);
        const c2 = new THREE.Color(0xa855f7);

        function updateColors() {
            for (let i = 0; i < COUNT; i++) {
                const mix = c1.clone().lerp(c2, (i / COUNT));
                colors[i * 3] = mix.r;
                colors[i * 3 + 1] = mix.g;
                colors[i * 3 + 2] = mix.b;
            }
            if (geo.attributes.color) geo.attributes.color.needsUpdate = true;
        }

        function computeTargets(mode) {
            for (let i = 0; i < COUNT; i++) {
                const i3 = i * 3;
                if (mode === 'galaxy') {
                    const radius = Math.pow(Math.random(), 1.4) * 9.5;
                    const branch = (i % 4) * ((Math.PI * 2) / 4);
                    const spin = radius * 1.15;
                    const spread = (Math.random() - 0.5) * 0.85;
                    targets[i3] = Math.cos(branch + spin) * radius + spread;
                    targets[i3 + 1] = (Math.random() - 0.5) * (1.2 - radius * 0.08);
                    targets[i3 + 2] = Math.sin(branch + spin) * radius + spread;
                } else if (mode === 'torus') {
                    const u = Math.random() * Math.PI * 2;
                    const v = Math.random() * Math.PI * 2;
                    const R = 5.2, r = 2.1;
                    targets[i3] = (R + r * Math.cos(v)) * Math.cos(u);
                    targets[i3 + 1] = r * Math.sin(v);
                    targets[i3 + 2] = (R + r * Math.cos(v)) * Math.sin(u);
                } else if (mode === 'sphere') {
                    const phi = Math.acos(2 * Math.random() - 1);
                    const theta = Math.random() * Math.PI * 2;
                    const rad = 5.6 + (Math.random() - 0.5) * 0.6;
                    targets[i3] = rad * Math.sin(phi) * Math.cos(theta);
                    targets[i3 + 1] = rad * Math.sin(phi) * Math.sin(theta);
                    targets[i3 + 2] = rad * Math.cos(phi);
                } else {
                    const x = ((i % 110) / 110 - 0.5) * 14;
                    const z = (Math.floor(i / 110) / 110 - 0.5) * 14;
                    targets[i3] = x;
                    targets[i3 + 1] = Math.sin(x * 0.8) * Math.cos(z * 0.8) * 2.2;
                    targets[i3 + 2] = z;
                }
            }
        }

        computeTargets('galaxy');
        for (let i = 0; i < COUNT * 3; i++) positions[i] = targets[i];
        updateColors();

        geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
        geo.setAttribute('color', new THREE.BufferAttribute(colors, 3));

        const mat = new THREE.PointsMaterial({
            size: 0.085,
            vertexColors: true,
            transparent: true,
            opacity: 0.9,
            blending: THREE.AdditiveBlending
        });

        const points = new THREE.Points(geo, mat);
        scene.add(points);

        function morphTo(mode) {
            computeTargets(mode);
        }

        function setPalette(hex1, hex2) {
            c1.setHex(hex1);
            c2.setHex(hex2);
            updateColors();
        }

        let isDragging = false, prevX = 0, prevY = 0;
        canvas.addEventListener('pointerdown', (e) => { isDragging = true; prevX = e.clientX; prevY = e.clientY; });
        window.addEventListener('pointermove', (e) => {
            if (!isDragging) return;
            points.rotation.y += (e.clientX - prevX) * 0.006;
            points.rotation.x += (e.clientY - prevY) * 0.006;
            prevX = e.clientX; prevY = e.clientY;
        });
        window.addEventListener('pointerup', () => isDragging = false);

        function resize() {
            const w = canvas.parentElement.clientWidth;
            const h = canvas.parentElement.clientHeight;
            renderer.setSize(w, h);
            camera.aspect = w / h;
            camera.updateProjectionMatrix();
        }
        window.addEventListener('resize', resize);
        resize();

        function animate() {
            requestAnimationFrame(animate);
            const spd = parseFloat(document.getElementById('spinSpeed').value || 1);
            points.rotation.y += 0.003 * spd;

            const posArr = geo.attributes.position.array;
            for (let i = 0; i < COUNT * 3; i++) {
                posArr[i] += (targets[i] - posArr[i]) * 0.06;
            }
            geo.attributes.position.needsUpdate = true;

            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>
</html>

/* Built-in 3D WebGL & Glassmorphic Shaders included in index.html */

// Complete Three.js 3D scene, camera, lighting, and pointer controls included