Gemini3 demo: управление жестами через камеру

Пополняем серию примеров, - что теперь можно сделать за 5 минут с ИИ из области, которая раньше вам была недоступна и занимала бы недели.

Сегодня демка управления разными фигурами в виде облака динамических частиц, которые морфятся друг в друга и управляемы жестами руки на камеру.

AiStudio->Build->Промпт:

Create a React 19, TypeScript, Three.js (@react-three/fiber), and Tailwind CSS application called "Gemini Kinetic Particles".

Core Functionality:
    Hand Tracking: Use @mediapipe/tasks-vision to detect hands. Map pinch gestures to particle chaos/attraction, hand distance to zoom, and hand position to 3D rotation. Implement input smoothing (lerp) and robust camera error handling (including stream cleanup and resolution constraints).

    Particle System: Render 5000 particles using THREE.Points with a custom radial gradient texture.

    Shape Modes:
        Math-based: Sphere, Cube, Saturn, Spiral.
        Physics-based: "Fireworks" mode with gravity, drag, velocity, and continuous multi-colored explosions using vertex colors.
        Procedural Sculptures: "Bear" (composed of spheres for limbs/head) and "Statue" (MSU Tower composed of boxes). These must be generated purely mathematically.

    Transitions: Implement smooth interpolation (lerp) when switching between shapes.

    Controls: A modern dark UI overlay with connection status, shape selector (clickable + A/D keyboard shortcuts), and color picker.

    UX: Ensure the scene is completely static/stable when idle (no infinite zoom or drift).

Rely solely on hardcoded procedural generation functions for all shapes.

#Gemini #dev #particles #camera #gestures #промпты
———
@tsingular