План в реальном времени: 3D‑сайты через Gemini
Забудьте о генераторах промптов. Здесь — полный интерактивный план, шаг за шагом. От пустого чата до интерактивного 3D‑опыта — только с помощью общения с искусственным интеллектом в реальном времени.
Шаг 1: Подготовка среды
Вам не нужно ничего устанавливать на компьютер. Весь процесс будет идти прямо в браузере. Для максимально быстрой итерации откройте два окна рядом друг с другом:
- Откройте бесплатный Google Gemini (gemini.google.com).
- Откройте онлайн‑редактор кода CodePen.io или PlayCode.io. Здесь мы сразу будем тестировать сгенерированный код, не создавая и не сохраняя HTML‑файлы.
Шаг 2: Стартовый мастер‑промпт
Первый prompt — самый важный. Он задаёт рамки для Gemini и определяет технологическую основу (Three.js с CDN, всё в одном файле). Скопируйте этот текст и вставьте его в Gemini:
Ты эксперт по WebGL и библиотеке Three.js. Твоя задача — написать полный HTML‑код (включая CSS и JS внутри) для рабочей 3D‑сцены. Требования: 1. Создай по центру вращающийся 3D‑объект (TorusKnot или Icosahedron). 2. Импортируй Three.js и OrbitControls через CDN‑ссылку (unpkg или cdnjs) в теге script. 3. Это должен быть «single file» — всё в одном фрагменте кода, без import maps. 4. Не используй внешние модели (GLTF) и текстуры (JPG/PNG). Всё создай процедурно в коде (MeshStandardMaterial, источники света, цвета). 5. Добавь точечные источники света (PointLight) и мягкие тени. 6. Установи очень тёмный цвет фона.
Шаг 3: Запуск и проверка
Как только Gemini сгенерирует код, скопируйте его в правом верхнем углу блока с кодом. Перейдите во второе окно (например, CodePen) и вставьте весь код ТОЛЬКО в поле HTML (поля CSS и JS оставьте пустыми, наш код уже содержит всё необходимое).
Подсказка: вы сразу увидите вращающийся 3D‑объект. Попробуйте кликнуть по нему мышью и потянуть — благодаря OrbitControls его можно вращать!
Шаг 4: Итерации в реальном времени
Теперь начинается настоящая работа в реальном времени. Вернитесь в Gemini. Нет нужды писать новый код или отправлять ему старый (он его помнит). Достаточно просто переписываться и постепенно добавлять требования. Попробуйте по очереди такие сообщения:
Это здорово. Теперь измени материал объекта с сплошного цвета на светящийся «wireframe» (каркасную модель) в неоново‑синем и розовом цвете.
Отлично. Теперь добавь на фон сцены медленно вращающуюся систему частиц (Points и PointsMaterial), которая будет имитировать звёзды в космосе.
Прекрасно. А теперь сделай так, чтобы при движении мыши цвета источников света плавно менялись в зависимости от позиции курсора на экране.
Шаг 5: Решение проблем (отладка)
Когда вы правите код в реальном времени, ИИ иногда ошибается, и в CodePen вы видите только чёрный или белый экран. Вам не нужно знать программирование — просто опишите проблему в чате:
Последний код, который ты прислал, не работает. Экран полностью чёрный, и ничего не вращается. Проверь, правильно ли ты подключил OrbitControls и не находится ли камера внутри объекта. Попробуй это исправить и пришли мне всю исправленную версию.
Готово! Сохранение проекта
Когда вы на 100% довольны результатом, скопируйте последний рабочий код из CodePen. В Windows откройте Блокнот (Notepad) или на Mac TextEdit, вставьте код и сохраните файл под именем «muj_3D_web.html». Готово! У вас есть собственное 3D‑приложение.