AIプロンプト有！Webカメラに手をかざすと動くパーティクルの実装！

        import * as THREE from 'https://cdn.skypack.dev/three@0.136.0';
        import { OrbitControls } from 'https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls.js';

        // --- Config ---
        const CONFIG = {
            particleCount: 15000,
            particleSize: 0.15,
            baseColor: new THREE.Color('#4facfe'),
            handInfluence: 0, // 0 (Fist) to 1 (Open)
            currentShape: 'heart'
        };

        // --- Three.js Initialization ---
        const container = document.getElementById('kumonosu-canvas-container');
        const scene = new THREE.Scene();
        scene.fog = new THREE.FogExp2(0x050505, 0.02);

        const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
        camera.position.z = 20;
        camera.position.y = 5;

        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        container.appendChild(renderer.domElement);

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

        // --- Particle System ---
        const geometry = new THREE.BufferGeometry();
        const positions = new Float32Array(CONFIG.particleCount * 3);
        const targetPositions = new Float32Array(CONFIG.particleCount * 3);
        
        for (let i = 0; i < CONFIG.particleCount * 3; i++) {
            positions[i] = (Math.random() - 0.5) * 50;
            targetPositions[i] = positions[i];
        }

        geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));

        const material = new THREE.PointsMaterial({
            color: CONFIG.baseColor,
            size: CONFIG.particleSize,
            sizeAttenuation: true,
            transparent: true,
            opacity: 0.8,
            blending: THREE.AdditiveBlending,
            depthWrite: false
        });

        const sprite = new THREE.TextureLoader().load('https://threejs.org/examples/textures/sprites/disc.png');
        material.map = sprite;

        const particleSystem = new THREE.Points(geometry, material);
        scene.add(particleSystem);

        // --- Shape Generation Functions ---
        function getPointOnSphere(r) {
            const u = Math.random();
            const v = Math.random();
            const theta = 2 * Math.PI * u;
            const phi = Math.acos(2 * v - 1);
            return {
                x: r * Math.sin(phi) * Math.cos(theta),
                y: r * Math.sin(phi) * Math.sin(theta),
                z: r * Math.cos(phi)
            };
        }

        function generateShape(shapeName) {
            const positions = [];
            const count = CONFIG.particleCount;

            for (let i = 0; i < count; i++) {
                let x, y, z;
                
                if (shapeName === 'heart') {
                    const phi = Math.acos(2 * Math.random() - 1);
                    const theta = Math.random() * Math.PI * 2;
                    x = 16 * Math.pow(Math.sin(theta), 3) * Math.sin(phi);
                    y = (13 * Math.cos(theta) - 5 * Math.cos(2*theta) - 2 * Math.cos(3*theta) - Math.cos(4*theta)) * Math.sin(phi);
                    z = 8 * Math.cos(phi); 
                    x *= 0.5; y *= 0.5; z *= 0.5;
                } else if (shapeName === 'flower') {
                    const angle = i * 137.5 * (Math.PI / 180);
                    const r = 0.3 * Math.sqrt(i);
                    x = r * Math.cos(angle);
                    y = (Math.random() - 0.5) * 5 + Math.sin(r * 0.5) * 5;
                    z = r * Math.sin(angle);
                } else if (shapeName === 'saturn') {
                    if (i < count * 0.3) {
                        const p = getPointOnSphere(4);
                        x = p.x; y = p.y; z = p.z;
                    } else {
                        const angle = Math.random() * Math.PI * 2;
                        const dist = 6 + Math.random() * 4;
                        x = Math.cos(angle) * dist;
                        z = Math.sin(angle) * dist;
                        y = (Math.random() - 0.5) * 0.5; 
                        const tilt = 0.4;
                        const tempY = y * Math.cos(tilt) - z * Math.sin(tilt);
                        const tempZ = y * Math.sin(tilt) + z * Math.cos(tilt);
                        y = tempY; z = tempZ;
                    }
                } else if (shapeName === 'spiral') {
                    const t = i * 0.1;
                    const r = 3 + Math.sin(t * 0.1);
                    x = r * Math.cos(t * 0.1);
                    y = (i * 0.02) - 10;
                    z = r * Math.sin(t * 0.1);
                } else if (shapeName === 'fireworks') {
                    const p = getPointOnSphere(Math.random() * 20);
                    x = p.x; y = p.y; z = p.z;
                }
                positions.push(x, y, z);
            }
            return positions;
        }

        function updateTargetShape(shapeName) {
            const newPos = generateShape(shapeName);
            for(let i = 0; i < CONFIG.particleCount * 3; i++) {
                targetPositions[i] = newPos[i];
            }
        }

        updateTargetShape('heart');

        // --- MediaPipe Hands Setup ---
        const videoElement = document.getElementById('kumonosu-input-video');
        const statusElement = document.getElementById('kumonosu-status');
        const loadingElement = document.getElementById('kumonosu-loading');

        if (typeof window.Hands === 'undefined' || typeof window.Camera === 'undefined') {
            statusElement.innerText = "Error: MediaPipe libraries failed to load.";
            loadingElement.innerText = "Library Load Error";
        }

        const hands = new window.Hands({locateFile: (file) => {
            return `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`;
        }});

        hands.setOptions({
            maxNumHands: 2,
            modelComplexity: 1,
            minDetectionConfidence: 0.5,
            minTrackingConfidence: 0.5
        });

        hands.onResults(onHandsResults);

        try {
            const cameraUtils = new window.Camera(videoElement, {
                onFrame: async () => {
                    await hands.send({image: videoElement});
                },
                width: 640,
                height: 480
            });
            
            cameraUtils.start()
                .then(() => {
                    loadingElement.style.display = 'none';
                    statusElement.innerText = "Camera active. Show your hand!";
                })
                .catch(err => {
                    loadingElement.innerHTML = "Camera Error<br><span style='font-size:12px; font-weight:normal'>Please allow camera access and reload</span>";
                    console.error("Camera start error:", err);
                });
        } catch (e) {
            console.error("Camera initialization failed", e);
            loadingElement.innerText = "Camera Init Failed";
        }

        function onHandsResults(results) {
            if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
                const landmarks = results.multiHandLandmarks[0];
                const wrist = landmarks[0];
                const tips = [8, 12, 16, 20];
                let totalDist = 0;

                tips.forEach(idx => {
                    const tip = landmarks[idx];
                    const dist = Math.sqrt(Math.pow(tip.x - wrist.x, 2) + Math.pow(tip.y - wrist.y, 2));
                    totalDist += dist;
                });

                const avgDist = totalDist / tips.length;
                const minVal = 0.2;
                const maxVal = 0.5;
                let influence = (avgDist - minVal) / (maxVal - minVal);
                influence = Math.max(0, Math.min(1, influence));
                CONFIG.handInfluence += (influence - CONFIG.handInfluence) * 0.1;
                statusElement.innerText = `Hand detected: ${influence < 0.3 ? "Closed (Tension)" : "Open (Expand)"}`;
            } else {
                CONFIG.handInfluence += (0.5 - CONFIG.handInfluence) * 0.05;
                statusElement.innerText = "No hand detected";
            }
        }

        // --- Event Listeners ---
        document.querySelectorAll('.kumonosu-shape-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                document.querySelectorAll('.kumonosu-shape-btn').forEach(b => b.classList.remove('kumonosu-active'));
                e.target.classList.add('kumonosu-active');
                const shape = e.target.dataset.shape;
                CONFIG.currentShape = shape;
                updateTargetShape(shape);
            });
        });

        document.getElementById('kumonosu-color-picker').addEventListener('input', (e) => {
            material.color.set(e.target.value);
        });

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

        // --- Animation Loop ---
        const clock = new THREE.Clock();

        function animate() {
            requestAnimationFrame(animate);
            const delta = clock.getDelta();
            const time = clock.getElapsedTime();
            controls.update();

            const posAttribute = geometry.attributes.position;
            const currentPos = posAttribute.array;
            let targetScale = 0.5 + CONFIG.handInfluence * 1.5;
            if (CONFIG.currentShape === 'fireworks') targetScale = 0.2 + CONFIG.handInfluence * 3.0;

            for (let i = 0; i < CONFIG.particleCount; i++) {
                const idx = i * 3;
                let tx = targetPositions[idx], ty = targetPositions[idx+1], tz = targetPositions[idx+2];
                let cx = currentPos[idx], cy = currentPos[idx+1], cz = currentPos[idx+2];

                const lerpSpeed = 2.0 * delta; 
                const dist = Math.sqrt(tx*tx + ty*ty + tz*tz); 
                let sx = tx * targetScale, sy = ty * targetScale, sz = tz * targetScale;

                if (CONFIG.handInfluence < 0.3) {
                    const jitter = (0.3 - CONFIG.handInfluence) * 0.5;
                    sx += (Math.random() - 0.5) * jitter;
                    sy += (Math.random() - 0.5) * jitter;
                    sz += (Math.random() - 0.5) * jitter;
                }
                
                const breathe = Math.sin(time * 2 + dist * 0.5) * 0.2;
                sx += sx * breathe * 0.1; sy += sy * breathe * 0.1; sz += sz * breathe * 0.1;

                currentPos[idx] += (sx - cx) * lerpSpeed;
                currentPos[idx+1] += (sy - cy) * lerpSpeed;
                currentPos[idx+2] += (sz - cz) * lerpSpeed;
            }

            posAttribute.needsUpdate = true;
            renderer.render(scene, camera);
        }

        animate();