Будущее наступило, а мы и не заметили: нейронки научились собирать сложные, интерактивные 3D-приложения вообще без кода 😮
Энтузиаст показал, как с помощью Gemini 3 собрать футуристичные интерактивные витрины в стиле Apple. Суть такая: вы просто загружаете 3D-модель, а нейронка пишет веб-приложение, где можно крутить, масштабировать и управлять освещением объекта с помощью жестов рук перед веб-камерой.
Стек: ИИ сам связывает React Three Fiber (для 3D) и Google MediaPipe (для трекинга рук);
Как повторить (гайд для ленивых):
— Берём любую 3D-модель и конвертируем в формат .gltf или .glb (это важно). Позаимствовать можно, например, здесь;
— Закидываем её прямо в чат с Gemini 3 (автор использовал emergent.sh);
— Вставляем промпт:
Role: Expert Creative Technologist and Frontend Developer.
Task: Create a single-page immersive web application that features a high-fidelity 3D model viewer controlled by hand gestures via the webcam.
Design Aesthetic:
Vibe: Similar to igloo.inc or Apple's product pages, minimalist, premium, smooth motion, and highly responsive.
Background: Deep dark grey/black flexible gradient or blurred ambient lights to make the 3D model pop.
Typography: Clean sans-serif fonts (Inter or SF Pro).
Core Tech Stack:
Framework: React (Next.js App Router preferred).
3D Engine: React Three Fiber (R3F) + Drei.
Styling: Tailwind CSS.
Computer Vision: Google MediaPipe Hands (specifically @mediapipe/tasks-vision) or react-webcam with a hand tracking model.
Functional Requirements:
3D Scene:
Initialize a canvas with a realistic environment map (lighting).
Load a placeholder 3D model (a simple geometry for now, but configured to accept a .glb or .gltf file of an Apple Vision Pro later).
The model should float in the center with a gentle idle animation (sine wave hovering).
Webcam & Hand Tracking:
Ask for camera permissions immediately on load with a sleek UI overlay.
Display a small, stylized video feed in the corner (circular mask) so the user can see their hand.
Detect hand landmarks in real-time.
— Нейросеть пишет код, настраивает сцену и UI, а мы чиллим.
Естественно, есть нюанс: с одного промпта получается примерно 70% готового продукта. Остальные 30% (фиксы багов, настройка чувствительности) добиваются в диалоге.
Но факт остаётся фактом: знать, как работает кватернион, больше не обязательно 😭
🫡
50
❤
21
👍
6
🔥
6
🌚
5
😁
2