a

2026-07-03 16:58:28 +08:00
commit 32b43f85bd
6240 changed files with 1987678 additions and 0 deletions
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>01 - Hello Particles | 最简单的粒子</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body { 
+            background: #0a0a0a; 
+            overflow: hidden;
+            font-family: 'Space Mono', monospace;
+        }
+        #canvas-container { 
+            width: 100vw; 
+            height: 100vh; 
+        }
+        .info {
+            position: fixed;
+            top: 20px;
+            left: 20px;
+            color: #00ff88;
+            font-size: 14px;
+            pointer-events: none;
+            text-shadow: 0 0 10px #00ff88;
+        }
+        .info h1 { font-size: 18px; margin-bottom: 8px; }
+        .info p { opacity: 0.8; font-size: 12px; }
+    </style>
+</head>
+<body>
+    <div id="canvas-container"></div>
+    <div class="info">
+        <h1>01 - Hello Particles</h1>
+        <p>最简单的静态粒子云</p>
+        <p>粒子数: <span id="count">0</span></p>
+    </div>
+
+    <!-- Three.js CDN -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script>
+        // 场景设置
+        const scene = new THREE.Scene();
+        scene.fog = new THREE.FogExp2(0x0a0a0a, 0.02);
+        
+        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        camera.position.z = 50;
+
+        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+        document.getElementById('canvas-container').appendChild(renderer.domElement);
+
+        // 粒子参数
+        const PARTICLE_COUNT = 500;
+        const geometry = new THREE.BufferGeometry();
+        const positions = new Float32Array(PARTICLE_COUNT * 3);
+        const colors = new Float32Array(PARTICLE_COUNT * 3);
+
+        // 生成随机粒子位置和颜色
+        for (let i = 0; i < PARTICLE_COUNT; i++) {
+            // 位置: 在球体内随机分布
+            const theta = Math.random() * Math.PI * 2;
+            const phi = Math.acos(2 * Math.random() - 1);
+            const r = Math.cbrt(Math.random()) * 30; // 立方根让分布更均匀
+            
+            positions[i * 3] = r * Math.sin(phi) * Math.cos(theta);
+            positions[i * 3 + 1] = r * Math.sin(phi) * Math.sin(theta);
+            positions[i * 3 + 2] = r * Math.cos(phi);
+
+            // 颜色: 青绿色渐变
+            const hue = 0.4 + Math.random() * 0.2; // 青绿色区间
+            const color = new THREE.Color().setHSL(hue, 0.8, 0.6);
+            colors[i * 3] = color.r;
+            colors[i * 3 + 1] = color.g;
+            colors[i * 3 + 2] = color.b;
+        }
+
+        geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+        geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+
+        // 粒子材质
+        const material = new THREE.PointsMaterial({
+            size: 0.5,
+            vertexColors: true,
+            transparent: true,
+            opacity: 0.8,
+            sizeAttenuation: true
+        });
+
+        const particles = new THREE.Points(geometry, material);
+        scene.add(particles);
+
+        // 更新计数显示
+        document.getElementById('count').textContent = PARTICLE_COUNT;
+
+        // 动画循环
+        let time = 0;
+        function animate() {
+            requestAnimationFrame(animate);
+            time += 0.001;
+
+            // 整体缓慢旋转
+            particles.rotation.y = time * 0.5;
+            particles.rotation.x = Math.sin(time * 0.3) * 0.2;
+
+            renderer.render(scene, camera);
+        }
+
+        animate();
+
+        // 响应窗口调整
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+    </script>
+</body>
+</html>