Создание интерактивных трехмерных пространств для веба традиционно требовало участия целой команды: 3D-моделлеров, художников по текстурам и опытных фронтенд-инженеров, работающих со сложными движками вроде Unity или Unreal Engine. Однако развитие пространственного рассуждения в модели Claude Opus 5.5 открыло возможность прямого процедурного прототипирования 3D-сцен за считаные минуты.
Джулиан Голди продемонстрировал методику генерации комплексных виртуальных пространств с помощью Claude Opus 5.5 и популярной библиотеки Three.js. Главная особенность подхода — строгое ограничение на единый автономный HTML-файл без использования внешних графических ресурсов.
Процедурный подход к графике без внешних текстур
Подключение внешних картинок (текстур камня, травы или неба) в коде, сгенерированном нейросетью, часто приводит к техническим сбоям: ссылки устаревают, а браузер блокирует загрузку из-за ограничений междоменных запросов (CORS).
Решением стал отказ от растровых ассетов в пользу процедурной математической генерации. Все элементы окружения — волны на воде, рельеф гор, атмосферная дымка и цикл смены времени суток — описываются чистым кодом на JavaScript и шейдерами GLSL.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Процедурный 3D-мир</title>
<style>
body { margin: 0; overflow: hidden; background: #050512; }
#viewport { width: 100vw; height: 100vh; }
</style>
<!-- Подключение Three.js через надежный публичный CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
<div id="viewport"></div>
<script>
// Инициализация базовой сцены и экспоненциального тумана
const scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0x0a0a20, 0.015);
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 18, 40);
camera.lookAt(0, 0, 0);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.getElementById('viewport').appendChild(renderer.domElement);
// Настройка базового рассеянного и направленного освещения
const ambientLight = new THREE.AmbientLight(0x223344, 1.2);
scene.add(ambientLight);
const sunLight = new THREE.DirectionalLight(0xffeedd, 1.6);
sunLight.position.set(25, 45, 25);
sunLight.castShadow = true;
scene.add(sunLight);
</script>
</body>
</html>
Базовый каркас обеспечивает готовую графическую канву с мягкими тенями и корректной перспективой.
Процедурный ландшафт и динамический цикл суток
Следующий шаг расширяет сцену: добавляется полигональная сетка ландшафта, координаты вершин которой модулируются математической синусоидой для имитации холмов или волн, а также запускается цикл анимации, симулирующий движение солнца по небосводу.
// Генерация процедурного ландшафта на базе PlaneGeometry
const terrainGeo = new THREE.PlaneGeometry(90, 90, 45, 45);
terrainGeo.rotateX(-Math.PI / 2);
const terrainMat = new THREE.MeshStandardMaterial({
color: 0x1b3b6f,
roughness: 0.8,
metalness: 0.1
});
const terrain = new THREE.Mesh(terrainGeo, terrainMat);
terrain.receiveShadow = true;
scene.add(terrain);
// Анимационный цикл со смещением источника света
const clock = new THREE.Clock();
function renderLoop() {
requestAnimationFrame(renderLoop);
const time = clock.getElapsedTime();
// Симуляция суточного движения солнца по орбите
sunLight.position.x = Math.sin(time * 0.25) * 50;
sunLight.position.z = Math.cos(time * 0.25) * 50;
renderer.render(scene, camera);
}
renderLoop();
// Обработчик адаптивности при изменении размеров экрана
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
В результате получается файл размером менее десяти килобайт, который мгновенно открывается в любом современном браузере на компьютере или смартфоне с частотой 60 кадров в секунду.
Ключевые параметры системного промпта
Для получения стабильного результата промпт должен содержать три строгих запрета: запрет на подключение локальных изображений, требование объединять весь код строго в один тег <script> и указание явных координат для камеры и источников света.
Области практического применения
Подход особенно ценен для быстрого создания интерактивных посадочных страниц, образовательных 3D-демонстраций физических процессов, игровых прототипов и виртуальных арт-пространств. Разработчики могут протестировать трехмерную концепцию за одну итерацию диалога, не тратя дни на ручную настройку сцен в специализированных редакторах.