nanocode/particle-lab/12-black-hole/index.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>12 - BLACK HOLE | 黑洞视界</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { background: #000; overflow: hidden; font-family: 'Space Mono', monospace; }
        #canvas-container { width: 100vw; height: 100vh; }
        .info {
            position: fixed; top: 20px; left: 20px; color: #ff6600;
            font-size: 14px; pointer-events: none; z-index: 100;
            text-shadow: 0 0 10px rgba(255,102,0,0.8);
        }
        .info h1 { font-size: 20px; margin-bottom: 8px; }
        .info p { opacity: 0.8; font-size: 12px; margin: 4px 0; }
        .horizon {
            position: fixed; bottom: 20px; right: 20px; color: #ff6600;
            font-size: 11px; text-align: right;
            background: rgba(0,0,0,0.8); padding: 15px; border-radius: 8px;
            border: 1px solid #331100;
        }
        .horizon code { color: #ffaa00; display: block; margin: 3px 0; }
    </style>
</head>
<body>
    <div id="canvas-container"></div>
    <div class="info">
        <h1>12 - BLACK HOLE</h1>
        <p>史瓦西黑洞 - 吸积盘 + 喷流</p>
        <p>粒子数: <span id="count">0</span></p>
        <p>FPS: <span id="fps">0</span></p>
    </div>
    <div class="horizon">
        <div>史瓦西半径:</div>
        <code>r_s = 2GM/c²</code>
        <div style="margin-top:8px">吸积盘温度:</div>
        <code>T ∝ r^(-3/4)</code>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/EffectComposer.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/RenderPass.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/ShaderPass.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/CopyShader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/LuminosityHighPassShader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/postprocessing/UnrealBloomPass.js"></script>

    <script>
        const COUNT = 8000;
        const SCHWARZSCHILD_RADIUS = 4;
        
        const scene = new THREE.Scene();
        scene.fog = new THREE.FogExp2(0x000000, 0.005);
        const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 2000);
        camera.position.set(0, 30, 60);
        
        const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        document.getElementById('canvas-container').appendChild(renderer.domElement);

        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        controls.autoRotate = true;
        controls.autoRotateSpeed = 0.3;

        const renderScene = new THREE.RenderPass(scene, camera);
        const bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0);
        bloomPass.strength = 2.5; bloomPass.radius = 0.8; bloomPass.threshold = 0;
        const composer = new THREE.EffectComposer(renderer);
        composer.addPass(renderScene);
        composer.addPass(bloomPass);

        const dummy = new THREE.Object3D();
        const color = new THREE.Color();
        const geometry = new THREE.SphereGeometry(0.2, 6, 6);
        const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
        const instancedMesh = new THREE.InstancedMesh(geometry, material, COUNT);
        instancedMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
        scene.add(instancedMesh);

        // 吸积盘粒子
        const particles = [];
        for (let i = 0; i < COUNT; i++) {
            const isJet = Math.random() < 0.15; // 15% 是喷流
            particles.push({
                r: isJet ? (Math.random() * 3 + 1) : (Math.random() * 40 + SCHWARZSCHILD_RADIUS + 2),
                theta: Math.random() * Math.PI * 2,
                height: isJet ? ((Math.random() - 0.5) * 60) : ((Math.random() - 0.5) * 0.5 * Math.exp(-(Math.random() * 40) / 10)),
                isJet: isJet,
                speed: Math.random() * 0.5 + 0.5,
                temp: 0
            });
        }

        // 事件视界黑球
        const horizonGeo = new THREE.SphereGeometry(SCHWARZSCHILD_RADIUS, 64, 64);
        const horizonMat = new THREE.MeshBasicMaterial({ color: 0x000000 });
        const horizon = new THREE.Mesh(horizonGeo, horizonMat);
        scene.add(horizon);

        // 光子球（微光）
        const photonGeo = new THREE.SphereGeometry(SCHWARZSCHILD_RADIUS * 1.5, 32, 32);
        const photonMat = new THREE.MeshBasicMaterial({ 
            color: 0xffaa00, 
            transparent: true, 
            opacity: 0.1,
            side: THREE.BackSide
        });
        const photonSphere = new THREE.Mesh(photonGeo, photonMat);
        scene.add(photonSphere);

        document.getElementById('count').textContent = COUNT;
        let lastTime = performance.now(), frameCount = 0;
        const fpsEl = document.getElementById('fps');
        const clock = new THREE.Clock();

        function animate() {
            requestAnimationFrame(animate);
            const now = performance.now();
            frameCount++;
            if (now - lastTime >= 1000) { fpsEl.textContent = frameCount; frameCount = 0; lastTime = now; }

            const time = clock.getElapsedTime();

            // 光子球脉动
            photonSphere.scale.setScalar(1 + Math.sin(time * 2) * 0.05);
            photonSphere.material.opacity = 0.05 + Math.sin(time * 3) * 0.03;

            for (let i = 0; i < COUNT; i++) {
                const p = particles[i];
                
                if (p.isJet) {
                    // 喷流：沿Y轴高速运动
                    p.height += p.speed * 2;
                    if (Math.abs(p.height) > 50) {
                        p.height = (p.height > 0 ? -50 : 50) + (Math.random() - 0.5) * 10;
                    }
                    p.temp = 1; // 最高温
                } else {
                    // 吸积盘：螺旋向内
                    const orbitalSpeed = 2 / Math.sqrt(p.r); // 开普勒定律
                    p.theta += orbitalSpeed * 0.02;
                    
                    // 螺旋向内
                    p.r -= 0.03;
                    if (p.r < SCHWARZSCHILD_RADIUS + 1) {
                        // 被吞噬，重生在外围
                        p.r = 40 + Math.random() * 10;
                        p.theta = Math.random() * Math.PI * 2;
                    }
                    
                    // 温度梯度 T ∝ r^(-3/4)
                    p.temp = Math.pow(SCHWARZSCHILD_RADIUS / p.r, 0.75);
                }
                
                // 位置
                let x, y, z;
                if (p.isJet) {
                    const spread = Math.abs(p.height) * 0.1;
                    x = (Math.random() - 0.5) * spread;
                    y = p.height;
                    z = (Math.random() - 0.5) * spread;
                } else {
                    x = Math.cos(p.theta) * p.r;
                    y = p.height;
                    z = Math.sin(p.theta) * p.r;
                }
                
                dummy.position.set(x, y, z);
                
                // 大小：越靠近视界越大
                const size = p.isJet ? 0.5 : (0.3 + (1 - p.r / 45) * 0.5);
                dummy.scale.setScalar(size);
                dummy.updateMatrix();
                instancedMesh.setMatrixAt(i, dummy.matrix);
                
                // 颜色：基于温度
                let hue, sat, light;
                if (p.isJet) {
                    hue = 0.15; sat = 0.9; light = 0.6; // 喷流：蓝白色
                } else if (p.temp > 0.8) {
                    hue = 0.0; sat = 1.0; light = 0.7; // 高温：蓝白
                } else if (p.temp > 0.5) {
                    hue = 0.08; sat = 1.0; light = 0.6; // 中温：黄白
                } else {
                    hue = 0.02; sat = 0.9; light = 0.4; // 低温：橙红
                }
                color.setHSL(hue, sat, light);
                instancedMesh.setColorAt(i, color);
            }

            instancedMesh.instanceMatrix.needsUpdate = true;
            instancedMesh.instanceColor.needsUpdate = true;
            controls.update();
            composer.render();
        }
        animate();

        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
            composer.setSize(window.innerWidth, window.innerHeight);
        });
    </script>
</body>
</html>