CodeCamp

@codecamp · ai · Russian · active

Subscribers 177K Subscribers, last 30 days: 177K → 177K +0 24h
Reach per post (ERR) 11.9%21.1K avg views
Posting 5.1/day last 4 hours ago
Reactions per 1K views 7.9 🔥 👍 ❤

Будущее наступило, а мы и не заметили: нейронки научились собирать сложные, интерактивные 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% (фиксы багов, настройка чувствительности) добиваются в диалоге. Но факт остаётся фактом: знать, как работает кватернион, больше не обязательно 😭

Views over time

010K20K30K14 Jan 22:3712 Nov 19:0129.3K14 Jan 22:37: 0 views12 Nov 19:01: 29,300 views
Snapshots we took after posting.
WhenViews
14 Jan 2026, 22:370
12 Nov 2026, 19:0129.3K

Who shared this post

Posts in other channels we index that link to this one. (Forwards with a hidden source can't be traced.)

Nobody yet.