3D-миры в браузере по одному промпту: как Claude Opus 5.5 генерирует интерактивные сцены на Three.js

Если ты когда-нибудь пробовал заняться 3D-графикой, то наверняка помнишь этот тяжелый порог входа. Нужно установить гигабайтный дистрибутив Unreal Engine или Unity, разобраться в картах нормалей, запекании теней и настройке шейдеров. Для простого веб-разработчика, маркетолога или дизайнера задача собрать интерактивную интерактивную сцену для лендинга обычно превращалась в недели мучений или поиск дорогого 3D-специалиста.

Но что, если трехмерный мир можно описать обычным текстом, а нейросеть сама упакует его в один легкий HTML-файл, который моментально открывается в браузере на любом телефоне?

Связка флагманской модели Claude Opus 5.5 и библиотеки Three.js вывела этот процесс на совершенно новый уровень. О ранних экспериментах с трехмерной графикой мы уже говорили в статье про интерактивные 3D-миры на Three.js, однако свежий апдейт модели кардинально изменил стабильность генерации кода.

Почему именно Claude Opus 5.5

В отличие от стандартных моделей, которые часто генерируют нерабочие обрывки скриптов, Opus 5.5 получил три ключевых преимущества:

• Ускорение на 30%: модель генерирует комплексные страницы заметно быстрее своего предшественника, сохраняя глубокую логику пространственного мышления.
• Расширенные 5-часовые окна лимитов: на тарифах Pro и Team теперь можно вести долгий итеративный диалог, пошагово добавляя в сцену свет, физику и новые объекты без страха упереться в счетчик сообщений.
• Автономное тестирование через Computer Use: модель может сама открыть сгенерированный холст в виртуальном браузере, замерить частоту кадров и устранить сбои до того, как ты увидишь результат.

4 элемента промпта для идеальной сцены

Чтобы нейросеть не выдавала абстрактную кашу из геометрических примитивов, опытные практики формулируют запрос по формуле четырех опорных точек:

1. Локация (Place): общая геометрия пространства (неоновый ночной лес, кристальная пещера, футуристическая лаборатория).
2. Главный герой (Hero): центральный объект композиции, притягивающий взгляд (парящий светящийся кристалл, обелиск, древнее дерево).
3. Настроение и глубина (Mood): плотность тумана (scene.fog) и общая цветовая палитра.
4. Освещение и время суток (Lighting & Time): мягкий рассеянный свет, направленные прожекторы с тенями или золотой закатный час.

Каркас сцены: разметка и подключение Three.js

Вот как выглядит базовая HTML-разметка, которую агент генерирует в виде монолитного файла. Здесь нет внешних тяжелых текстур: весь визуал строится процедурно через шейдеры и математику WebGL:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Интерактивная 3D-сцена на Three.js</title>
  <style>
    body { margin: 0; overflow: hidden; background: #070714; }
    #canvas-container { width: 100vw; height: 100vh; }
    #fps-counter { 
      position: absolute; top: 12px; left: 12px; 
      color: #00ffcc; font-family: monospace; font-size: 13px; 
    }
  </style>
  <!-- Подключение стабильной сборки Three.js через надежный CDN -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
  <div id="fps-counter">FPS: 60</div>
  <div id="canvas-container"></div>
  <script src="app.js"></script>
</body>
</html>

Инициализация рендера, света и анимационного цикла

В скрипте app.js модель настраивает перспективную камеру, рендерер с поддержкой теней и непрерывный цикл отрисовки кадров:

// 1. Инициализация сцены и атмосферного тумана
const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x070714, 0.03);

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 4, 12);

const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
document.getElementById('canvas-container').appendChild(renderer.domElement);

// 2. Окружающее и направленное освещение сцены
const ambientLight = new THREE.AmbientLight(0x203040, 1.2);
scene.add(ambientLight);

const dirLight = new THREE.DirectionalLight(0xff9944, 2.5);
dirLight.position.set(8, 16, 8);
dirLight.castShadow = true;
scene.add(dirLight);

// 3. Центральный объект (Hero-объект с металлическим отливом)
const geometry = new THREE.IcosahedronGeometry(2.5, 3);
const material = new THREE.MeshStandardMaterial({ 
  color: 0x00ffaa, 
  roughness: 0.15, 
  metalness: 0.85 
});
const heroMesh = new THREE.Mesh(geometry, material);
heroMesh.castShadow = true;
scene.add(heroMesh);

// 4. Цикл requestAnimationFrame и адаптивность к экрану
function animate() {
  requestAnimationFrame(animate);
  heroMesh.rotation.y += 0.006;
  heroMesh.rotation.x += 0.003;
  renderer.render(scene, camera);
}
animate();

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

Такой рабочий процесс превращает создание визуальных концептов в увлекательный интерактивный диалог: ты описываешь настроение, модель выдает готовый код, тестирует плавность кадров, а ты через минуту крутишь готовую сцену в браузере.