nanocode/particle-lab/index.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🌌 Particle Lab - 粒子动效实验室</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
            min-height: 100vh;
            font-family: 'Space Mono', 'Courier New', monospace;
            color: #fff;
            overflow-x: hidden;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 60px 20px;
        }
        h1 {
            font-size: 48px;
            text-align: center;
            margin-bottom: 10px;
            background: linear-gradient(90deg, #00ff88, #00d4ff, #ff6b9d);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 0 30px rgba(0,255,136,0.3);
        }
        .subtitle {
            text-align: center;
            color: #888;
            font-size: 16px;
            margin-bottom: 50px;
        }
        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
        }
        .card {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 16px;
            padding: 30px;
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .card:hover {
            background: rgba(255,255,255,0.06);
            border-color: rgba(0,255,136,0.4);
            transform: translateY(-5px);
            box-shadow: 0 10px 40px rgba(0,255,136,0.1);
        }
        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #00ff88, #00d4ff);
            opacity: 0;
            transition: opacity 0.3s;
        }
        .card:hover::before {
            opacity: 1;
        }
        .card-number {
            font-size: 48px;
            font-weight: bold;
            color: rgba(0,255,136,0.2);
            position: absolute;
            top: 20px;
            right: 20px;
        }
        .card h2 {
            font-size: 22px;
            margin-bottom: 10px;
            color: #00ff88;
        }
        .card p {
            color: #aaa;
            font-size: 14px;
            line-height: 1.6;
        }
        .card .status {
            display: inline-block;
            margin-top: 15px;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: bold;
        }
        .status.done {
            background: rgba(0,255,136,0.15);
            color: #00ff88;
            border: 1px solid rgba(0,255,136,0.3);
        }
        .status.pending {
            background: rgba(255,193,7,0.15);
            color: #ffc107;
            border: 1px solid rgba(255,193,7,0.3);
        }
        .status.webgpu {
            background: linear-gradient(90deg,rgba(255,59,48,0.2),rgba(0,122,255,0.2));
            color: #00d4ff;
            border: 1px solid rgba(0,212,255,0.4);
        }
        .footer {
            text-align: center;
            margin-top: 60px;
            color: #555;
            font-size: 12px;
        }
        .footer a {
            color: #00d4ff;
            text-decoration: none;
        }
        @media (max-width: 768px) {
            h1 { font-size: 32px; }
            .container { padding: 40px 15px; }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🌌 Particle Lab</h1>
        <p class="subtitle">基于 Three.js 的渐进式粒子动效学习实验室</p>
        
        <div class="grid">
            <div class="card" onclick="location.href='01-hello-particles/'">
                <span class="card-number">01</span>
                <h2>Hello Particles</h2>
                <p>最简单的入门示例。500个静态彩色粒子在球体内均匀分布，整体缓慢旋转。学习 BufferGeometry 和 PointsMaterial 的基础用法。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='02-moving-dots/'">
                <span class="card-number">02</span>
                <h2>Moving Dots</h2>
                <p>让每个粒子独立动起来！基于正弦波的时间驱动动画，2000个粒子沿螺旋轨迹波动。支持实时调节速度、振幅和频率。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='03-sphere-bloom/'">
                <span class="card-number">03</span>
                <h2>Sphere Bloom</h2>
                <p>斐波那契球面分布算法，15000 个发光粒子均匀分布在球面。使用 UnrealBloomPass 后期处理实现霓虹发光效果，支持实时调节发光强度和半径。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='04-cube/'">
                <span class="card-number">04</span>
                <h2>CUBE</h2>
                <p>3D 立方体晶格，8000 个立方体粒子形成动态波动效果。使用网格坐标系统，支持调节立方体大小和波动强度。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='05-helix/'">
                <span class="card-number">05</span>
                <h2>HELIX</h2>
                <p>双螺旋 DNA 结构，6000 个球体粒子形成双链螺旋。双链不同色（蓝/橙），带有连接桥动画效果。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='06-torus/'">
                <span class="card-number">06</span>
                <h2>TORUS</h2>
                <p>圆环面（甜甜圈），8000 个八面体粒子。斐波那契分布 + 波浪变形，彩虹色流动效果。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='07-s7777/'">
                <span class="card-number">07</span>
                <h2>S7777</h2>
                <p>数字 7777 粒子艺术，10000 个立方体组成四个 7 的形状。霓虹红色发光，背景粒子流动。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='08-nave/'">
                <span class="card-number">08</span>
                <h2>NAVE</h2>
                <p>飞船导航箭头，8000 个锥形粒子形成箭头形状。带星空尾迹流动效果，绿色科技风格。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='09-lorenz/'">
                <span class="card-number">09</span>
                <h2>LORENZ</h2>
                <p>洛伦兹吸引子 - 混沌理论的"蝴蝶效应"。经典参数 σ=10, ρ=28, β=8/3，红色发光尾迹。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='10-galaxy/'">
                <span class="card-number">10</span>
                <h2>GALAXY</h2>
                <p>螺旋星系模拟，5000 粒子形成旋臂结构。对数螺旋 r=ae^(bθ)，中心超大质量黑洞发光。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='11-flow-field/'">
                <span class="card-number">11</span>
                <h2>FLOW FIELD</h2>
                <p>Perlin Noise 向量力场，8000 粒子流动。速度映射色彩（绿→青），鼠标可扰动流场。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='12-black-hole/'">
                <span class="card-number">12</span>
                <h2>BLACK HOLE</h2>
                <p>史瓦西黑洞模拟，8000 粒子形成吸积盘 + 喷流。温度梯度着色（红→黄→蓝）。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='13-neural/'">
                <span class="card-number">13</span>
                <h2>NEURAL</h2>
                <p>神经网络脉冲传播，800 节点 + 5200 电脉冲。5层结构，信号沿突触传递，紫/青色主题。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='14-vortex/'">
                <span class="card-number">14</span>
                <h2>VORTEX</h2>
                <p>龙卷风螺旋气流，8000 粒子分5层。漏斗形状越往上越细，青色渐变。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='15-fireworks/'">
                <span class="card-number">15</span>
                <h2>FIREWORKS 🧨</h2>
                <p>中国传统烟花！菊花/心形/垂柳爆炸，重力物理，城市夜景背景，支持自动发射。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='16-matrix-rain/'">
                <span class="card-number">16</span>
                <h2>MATRIX RAIN 💻</h2>
                <p>赛博朋克代码雨！Matrix黑客帝国风格，中文+代码混合流，故障特效，经典绿色流光。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='17-fallwater/'">
                <span class="card-number">17</span>
                <h2>FALLWATER 🌊</h2>
                <p>壮观瀑布！数千粒子从百米高处奔流而下，碰撞地面溅起水花，蓝白渐变水色。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='18-dandelion/'">
                <span class="card-number">18</span>
                <h2>DANDELION 🌼</h2>
                <p>夏日蒲公英！绒毛随风飘散，鼠标触碰会加速散开，轻盈浪漫的治愈系效果。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='19-fireflies/'">
                <span class="card-number">19</span>
                <h2>FIREFLIES ✨</h2>
                <p>夏夜萤火虫！忽明忽暗的闪烁，停留与飞行双模式，树林深处的梦幻光点。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='20-snow/'">
                <span class="card-number">20</span>
                <h2>SNOW ❄️</h2>
                <p>冬日雪花！六角冰晶旋转飘落，堆积在地面，白色纯洁的冬季氛围。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='21-aurora/'">
                <span class="card-number">21</span>
                <h2>AURORA 🌌</h2>
                <p>极光舞动！Perlin噪声驱动的带状光幕，绿色紫色渐变流动，北极圈奇观。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='22-ink-wash/'">
                <span class="card-number">22</span>
                <h2>INK WASH 🎋</h2>
                <p>水墨山水！墨汁晕开流体效果，宣纸纹理背景，中国传统留白美学。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='23-taiji/'">
                <span class="card-number">23</span>
                <h2>TAIJI ☯️</h2>
                <p>太极阴阳！黑白粒子旋转追逐，阴阳相生相克，道家哲学可视化。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='24-bagua/'">
                <span class="card-number">24</span>
                <h2>BAGUA 八卦</h2>
                <p>八卦阵！八种卦象符文旋转发光，金色能量线条，神秘东方玄学。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='25-lantern/'">
                <span class="card-number">25</span>
                <h2>LANTERN 🏮</h2>
                <p>孔明灯！红色灯笼缓缓升空，火焰闪烁，许愿祈福的温暖画面。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='26-gold-explosion/'">
                <span class="card-number">26</span>
                <h2>GOLD EXPLOSION ✨</h2>
                <p>金色粒子爆炸！从中心爆发向外扩散，拖尾光效，绚烂烟花，Canvas2D 高性能渲染。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='27-stanford-models/'">
                <span class="card-number">27</span>
                <h2>STANFORD 3D 🐰</h2>
                <p>斯坦福 3D 扫描数据集！加载真实扫描模型（Bunny/Dragon/Buddha），PLY格式，多种材质。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='28-real-stanford-models/'">
                <span class="card-number">28</span>
                <h2>REAL STANFORD 🎯</h2>
                <p>真实斯坦福数据集！本地加载 bun_zipper.ply 高质量模型，35,947顶点，法线/线框/标准材质。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='29-vertex-visualization/'">
                <span class="card-number">29</span>
                <h2>VERTEX VIZ 🔬</h2>
                <p>顶点数据可视化！网格表面、顶点云、线框结构、高度热力图、法线方向、顶点爆炸动画。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='30-stanford-dragon/'">
                <span class="card-number">30</span>
                <h2>STANFORD DRAGON 🐉</h2>
                <p>斯坦福龙模型！871,414三角面，4级质量可选(351KB-33MB)，5种渲染模式。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='31-stanford-buddha/'">
                <span class="card-number">31</span>
                <h2>STANFORD BUDDHA 🧘</h2>
                <p>斯坦福佛像模型！1,087,716三角面，翡翠/古铜/鎏金材质，庄严氛围灯光。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='33-armadillo/'">
                <span class="card-number">33</span>
                <h2>ARMADILLO 🦔</h2>
                <p>犰狳扫描模型！172,974顶点带RGB颜色，6.6MB，彩色顶点渲染。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='34-xyzrgb-dragon/'">
                <span class="card-number">34</span>
                <h2>XYZRGB DRAGON 🐉</h2>
                <p>彩色龙扫描！360万顶点原始颜色，68MB压缩，流式加载+降采样。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='35-xyzrgb-manuscript/'">
                <span class="card-number">35</span>
                <h2>XYZRGB MANUSCRIPT 📜</h2>
                <p>古代手稿扫描！230万顶点全彩，42MB，原始颜色保留。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='36-xyzrgb-statuette/'">
                <span class="card-number">36</span>
                <h2>XYZRGB STATUETTE 🏛️</h2>
                <p>彩色雕像扫描！500万顶点，102MB超大文件，高采样率渲染。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            
            <div class="card" onclick="location.href='37-mixamo-defeated/'">
                <span class="card-number">37</span>
                <h2>MIXAMO DEFEATED 🎭</h2>
                <p>Mixamo骨骼动画展示！FBX格式，Defeated战败动作，Three.js动画混合器。</p>
                <span class="status done">✓ 已完成</span>
            </div>
            <div class="card" onclick="location.href='38-fluid-orb/'">
                <span class="card-number">38</span>
                <h2>FLUID ORB 🔮</h2>
                <p>WebGPU + TSL流体模拟！魔法球体，红蓝能量注入，物理颜色混合效果。</p>
                <span class="status webgpu">🔥 WebGPU</span>
            </div>
        </div>
        
        <div class="footer">
            <p>参考: <a href="https://particles.casberry.in/" target="_blank">AI Particle Simulator by Casberry</a></p>
            <p style="margin-top: 10px;">Built with Three.js & ❤️</p>
        </div>
    </div>
</body>
</html>