# Промпт на 3 часа вычислений: собираем Three.js игру в Claude Opus 5.5 Max без правок кода
Каноническая страница: https://plainews.ru/posts/prompt-na-3-chasa-vychisleniy-sobiraem-three-js-igru-v-claude-opus-5-5-max-bez-p
Опубликовано: 2026-10-15T07:02:59.432Z
Саймон Уиллисон запустил необычный эксперимент: отправил короткий промпт в мобильное приложение Claude и получил полноценную браузерную 3D игру с процедурной ге
Саймон Уиллисон запустил необычный эксперимент: отправил короткий промпт в мобильное приложение Claude и получил полноценную браузерную 3D-игру с процедурной генерацией, анимацией, звуком и ачивками. Нейросеть Claude Opus 5.5 Max обрабатывала запрос 3 часа и 7 минут в обычном режиме чата, полностью спроектировав игровую механику без участия человека.
Разбираемся, как устроен этот подход к вайб-кодингу (разработке через высокоуровневые описания на естественном языке), почему открытые абстрактные инструкции заставляют рассуждающие модели работать эффективнее жестких ТЗ и как воспроизвести этот пайплайн для своих интерактивных веб-приложений.
## Зачем отдавать геймдев на откуп длительным вычислениям
Классический подход к генерации кода через LLM требует от разработчика пошагового контроля: вы просите структуру, затем настраиваете Three.js сцену, отдельно пишете генератор геометрии и часами отлаживаете коллизии. Если прервать цепочку или дать модели слишком узкую задачу, результат часто выглядит как безжизненная демка из учебника.
Длительные вычисления (reasoning crunch) в моделях уровня Claude Opus 5.5 меняют этот процесс. Когда у модели есть свободный лимит времени на внутреннее планирование, она берет на себя роль геймдизайнера. Вместо генерации первого попавшегося шаблона деревовидных фракталов нейросеть проектирует правила взаимодействия, баланс сложности и звуковой дизайн.
> **К сведению.** Эксперимент Уиллисона проводился через стандартный клиент Claude для iPhone в обычном чате, а не через терминальный интерфейс Claude Code. Вся логика, стили, 3D-движок и процедурные алгоритмы были скомпонованы в рамках одного автономного сеанса размышления.
| Параметр разработки | Классический промптинг LLM | Длительные рассуждения (Opus 5.5 Max) |
| --- | --- | --- |
| Время ответа | 15–40 секунд | До 3 часов 7 минут |
| Участие разработчика | Пошаговое исправление багов | Единственный вводный промпт |
| Геймдизайн | Задается жестко человеком | Модель сама придумывает правила и фан |
| Звук и графика | Внешние ассеты / ссылки | Процедурный синтез (Web Audio API, Canvas) |
| Итог | Разрозненные фрагменты кода | Самодостаточный рабочий HTML-файл |
## Анатомия вводного промпта: почему сработала фраза «make sure it is fun»
В своем блоге Уиллисон отметил парадоксальный факт: прямая инструкция «сделай так, чтобы это было весело» сработала неожиданно качественно. Обычно размытые требования приводят к шаблонным ответам, но в связке с сильными рассуждающими моделями абстрактные рамки раскрывают эвристический поиск решений.
Исходный запрос строился вокруг простой идеи сравнения различий:
```plain
Build a three js game called "Tree appreciator" - it shows you two algorithmically generated trees and the game mechanics is about appreciating the differences between them. Think hard about how to make sure it is both fun and beautiful.
```
В этом тексте объединены три ключевых триггера:
1. **Жесткий технологический стек.** Прямое указание на Three.js отсекает попытки собрать интерфейс на чистом CSS или сторонних тяжелых библиотеках.
2. **Базовый игровой цикл (core loop).** Генерация двух процедурных объектов и механика поиска различий задают правила игры.
3. **Критерий качества.** Фразы «Think hard» и «make sure it is both fun and beautiful» заставляют модель тратить вычислительные токены на проектирование наград, анимаций и интерфейса, а не просто выводить каркас 3D-моделей.
## Как запустить Three.js прототип из чата локально
Когда модель возвращает результат длительной генерации, она выдает цельный HTML-документ, внутри которого упакованы стили, подключение библиотеки Three.js через CDN, процедурные генераторы геометрии и аудиосинтезатор на Web Audio API.
### Шаг 1. Сохранение файла сборки
Создайте пустую директорию и скопируйте ответ модели в файл index.html.
```bash
mkdir tree-appreciator
cd tree-appreciator
touch index.html
```
Базовый каркас, который генерируют современные модели для самодостаточных Three.js приложений, выглядит следующим образом:
```html
Tree Appreciator
Найдите отличия и оцените красоту деревьев
```
### Шаг 2. Запуск локального веб-сервера
Не открывайте HTML-файл двойным кликом через протокол file://. Из-за ограничений безопасности современных браузеров (CORS и блокировки Web Audio / шейдеров) проект должен отдаваться через HTTP-сервер.
Запустите встроенный сервер Python:
```bash
python3 -m http.server 8000
```
Или воспользуйтесь быстрым сервером Node.js:
```bash
npx serve .
```
Откройте адрес http://localhost:8000 в браузере. При клике на экран игра активирует аудиоконтекст и начнет отрисовку процедурных деревьев.
## Как устроена процедурная генерация внутри сгенерированной игры
Главная сложность создания браузерной 3D-игры в один промпт — отсутствие внешних файлов и текстур. Модели приходится писать процедурный генератор прямо в JavaScript.
Для игры «Tree Appreciator» Claude реализовал алгоритм L-систем (фрактального ветвления). Дерево строится через рекурсивное создание цилиндрической геометрии со смещением ветвей под случайными углами.
```javascript
function generateBranch(parent, length, thickness, depth) {
if (depth <= 0) return;
const geometry = new THREE.CylinderGeometry(thickness * 0.7, thickness, length, 8);
const material = new THREE.MeshStandardMaterial({ color: 0x5c4033, roughness: 0.9 });
const branch = new THREE.Mesh(geometry, material);
branch.position.y = length / 2;
parent.add(branch);
const numChildren = Math.floor(Math.random() * 3) + 1;
for (let i = 0; i < numChildren; i++) {
const nextBranch = new THREE.Group();
nextBranch.position.y = length;
nextBranch.rotation.z = (Math.random() - 0.5) * 0.8;
nextBranch.rotation.y = Math.random() * Math.PI * 2;
branch.add(nextBranch);
generateBranch(nextBranch, length * 0.75, thickness * 0.7, depth - 1);
}
}
```
Чтобы сделать игру увлекательной, Claude встроил различия в параметры генерации:
- Разная плотность листвы на кронах левого и правого дерева.
- Скрытые аномалии ветвления (например, лишний узел или измененный угол роста).
- Процедурные частицы падающих листьев, реагирующие на курсор мыши.
- Простая система достижений, отслеживающая, сколько пар деревьев игрок внимательно изучил.
Звуковое сопровождение реализовано без внешних MP3-файлов через программный осциллятор Web Audio API. При клике на ветку игра генерирует мягкие синусоидальные аккорды (ambient-переливы), подтверждающие выбор игрока.
## Где это ломается и подводные камни
Подход к разработке через многочасовые рассуждения нейросетей имеет специфические технические ограничения:
1. **Таймауты мобильных приложений и соединений.** В эксперименте Уиллисона мобильное приложение Claude держало задачу в облаке больше 3 часов. Если соединение с сервером сбрасывается или сессия засыпает, запрос может оборваться без сохранения промежуточного кода.
2. **Блокировка автовоспроизведения звука.** Браузеры запрещают синтез звука через Web Audio API до первого клика пользователя по странице. Если LLM не привязала инициализацию AudioContext к событию click или keydown, консоль выдаст ошибку AudioContext was not allowed to start.
3. **Падение производительности (Draw Calls).** При генерации тысяч отдельных веток и листьев с собственной геометрией FPS в Three.js резко падает. Для стабильных 60 кадров в секунду модели требуется явно указывать на использование THREE.InstancedMesh или объединение буферов (BufferGeometryUtils.mergeGeometries).
> **Важно.** Если модель возвращает код, который зависает при старте, проверьте глубину рекурсии процедурного генератора. Для браузеров безопасная глубина ветвления фракталов составляет 5–7 уровней.
## Что попробовать дальше
Если вы хотите повторить эксперимент и получить более сложную игровую механику, модифицируйте исходный промпт следующими параметрами:
- **Добавьте требования к рендеру:** укажите использование мягких теней (renderer.shadowMap.type = THREE.PCFSoftShadowMap) и шейдерной постобработки (bloom-эффект для атмосферы).
- **Задайте механику таймера:** попросите модель ограничить время на поиск различий и начислять бонусные очки за скорость.
- **Экспортируйте результат:** попросите Claude добавить в интерфейс кнопку скачивания понравившегося 3D-дерева в формате .gltf для дальнейшего использования в Blender или Unity.
## FAQ
### Почему Claude обрабатывал запрос дольше 3 часов?
В модели Claude Opus 5.5 Max с расширенным окном рассуждений время ответа зависит от сложности задачи. Получив инструкцию спроектировать красивую и интересную игру, модель проводит масштабный внутренний перебор архитектурных решений, алгоритмов процедурной генерации и баланса геймплея перед тем, как выдать итоговый код.
### Можно ли запускать такие игры на смартфонах?
Да, код на Three.js полностью кроссплатформенный и работает в мобильных браузерах. Однако для корректного управления модель должна добавить обработчики событий touchstart и touchmove вместо стандартных событий мыши mousemove.
### Как заставить модель сгенерировать игру с внешней 3D-моделью вместо процедурной?
Для запуска в один файл внешние модели использовать сложно, так как им нужны локальные файлы .gltf или .obj. Если вы хотите сторонние ассеты, попросите модель закодировать простую низкополигональную сетку прямо в теле скрипта в формате Base64 или использовать стандартные примитивы Three.js.
### Чем запуск в приложении отличается от инструмента Claude Code?
Claude Code работает в терминале локальной машины разработчика, имеет прямой доступ к файловой системе, может выполнять тесты, ставить npm-пакеты и править проект итеративно. Обычный чат выдает готовый монолитный артефакт за одну генерацию, опираясь исключительно на свои внутренние рассуждения.
## Источники
- Simon Willison: Tree Appreciator