Доступ к приложению заблокирован
Чтобы получить доступ к этому 3D‑уроку, вам нужно сначала подписаться на наш YouTube‑канал.
План в реальном времени: 3D‑сайты через Gemini
Забудьте про генераторы промптов. Здесь — полный интерактивный план, шаг за шагом. От пустого чата до интерактивного 3D‑опыта — только с помощью живой переписки с искусственным интеллектом в реальном времени.
Шаг 1: Подготовка среды
Вам не нужно ничего устанавливать на компьютер. Весь процесс будет идти прямо в браузере. Для самой быстрой работы откройте два окна рядом друг с другом:
- Откройте бесплатный Google Gemini (gemini.google.com).
- Откройте онлайн‑редактор кода CodePen.io или PlayCode.io. Здесь мы будем сразу тестировать сгенерированный код, не создавая и не сохраняя HTML‑файлы.
Шаг 2: Стартовый мастер‑промпт
Первый промпт — самый важный. Он задаёт рамки для 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‑приложение.