nanocode/particle-lab/04-cube/index.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04 - CUBE | 立方体晶格</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: #ff6b9d;
            font-size: 14px; pointer-events: none; z-index: 100;
            text-shadow: 0 0 10px rgba(255,107,157,0.5);
        }
        .info h1 { font-size: 20px; margin-bottom: 8px; }
        .info p { opacity: 0.8; font-size: 12px; margin: 4px 0; }
        .controls {
            position: fixed; bottom: 20px; left: 20px; color: #fff;
            font-size: 12px; background: rgba(0,0,0,0.7); padding: 15px;
            border-radius: 8px; border: 1px solid #333; backdrop-filter: blur(10px);
        }
        .control-group { margin: 10px 0; display: flex; align-items: center; gap: 10px; }
        .control-group label { width: 80px; color: #aaa; }
        .control-group input[type="range"] { width: 120px; }
        .control-group span { color: #ff6b9d; min-width: 40px; }
    </style>
</head>
<body>
    <div id="canvas-container"></div>
    <div class="info">
        <h1>04 - CUBE</h1>
        <p>3D 立方体晶格</p>
        <p>粒子数: <span id="count">0</span></p>
        <p>FPS: <span id="fps">0</span></p>
    </div>
    <div class="controls">
        <div class="control-group">
            <label>立方体大小</label>
            <input type="range" id="cubeSize" min="20" max="60" step="2" value="40">
            <span id="sizeVal">40</span>
        </div>
        <div class="control-group">
            <label>波动强度</label>
            <input type="range" id="waveAmp" min="0" max="5" step="0.1" value="1">
            <span id="waveVal">1</span>
        </div>
        <div class="control-group">
            <label>旋转速度</label>
            <input type="range" id="rotSpeed" min="0" max="5" step="0.1" value="1">
            <span id="rotVal">1</span>
        </div>
    </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 scene = new THREE.Scene();
        scene.fog = new THREE.FogExp2(0x000000, 0.008);
        const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 2000);
        camera.position.set(80, 80, 80);
        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 = 1.0;

        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 = 1.2; bloomPass.radius = 0.3; 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 target = new THREE.Vector3();
        const geometry = new THREE.BoxGeometry(0.4, 0.4, 0.4);
        const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
        const instancedMesh = new THREE.InstancedMesh(geometry, material, COUNT);
        instancedMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
        scene.add(instancedMesh);

        const positions = [];
        const gridSize = 20; // 20x20x20 = 8000
        for (let i = 0; i < COUNT; i++) {
            positions.push(new THREE.Vector3(0, 0, 0));
            instancedMesh.setColorAt(i, color.setHex(0xff6b9d));
        }

        const cubeSizeSlider = document.getElementById('cubeSize');
        const waveAmpSlider = document.getElementById('waveAmp');
        const rotSpeedSlider = document.getElementById('rotSpeed');
        cubeSizeSlider.addEventListener('input', (e) => document.getElementById('sizeVal').textContent = e.target.value);
        waveAmpSlider.addEventListener('input', (e) => document.getElementById('waveVal').textContent = e.target.value);
        rotSpeedSlider.addEventListener('input', (e) => { controls.autoRotateSpeed = parseFloat(e.target.value); document.getElementById('rotVal').textContent = e.target.value; });

        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();
            const size = parseFloat(cubeSizeSlider.value);
            const waveAmp = parseFloat(waveAmpSlider.value);
            const spacing = size / gridSize;
            const offset = size / 2;

            let idx = 0;
            for (let x = 0; x < gridSize; x++) {
                for (let y = 0; y < gridSize; y++) {
                    for (let z = 0; z < gridSize; z++) {
                        if (idx >= COUNT) break;
                        
                        const px = x * spacing - offset;
                        const py = y * spacing - offset;
                        const pz = z * spacing - offset;
                        
                        // 波动效果
                        const dist = Math.sqrt(px*px + py*py + pz*pz);
                        const wave = Math.sin(time * 2 + dist * 0.2) * waveAmp;
                        
                        target.set(px + wave, py + wave, pz + wave);
                        positions[idx].lerp(target, 0.1);
                        
                        dummy.position.copy(positions[idx]);
                        dummy.rotation.x = time + x * 0.1;
                        dummy.rotation.y = time + y * 0.1;
                        dummy.updateMatrix();
                        instancedMesh.setMatrixAt(idx, dummy.matrix);
                        
                        // 颜色：基于位置的热力图
                        const hue = 0.9 + (py / size) * 0.15; // 粉红到紫色
                        color.setHSL(hue % 1, 0.9, 0.5 + wave * 0.1);
                        instancedMesh.setColorAt(idx, color);
                        idx++;
                    }
                }
            }

            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>