title

Теория

В Three.jsвсё строится на трёх основных элементах:scene,cameraи renderer. Сцена — это мир, в котором находятся объекты. Камера определяет, откуда именно мы смотрим на этот мир. Рендерер превращает всю систему в изображение на экране.

Sceneможно представить как контейнер для всего, что происходит в 3D-пространстве. Именно в неё добавляются объекты, свет и другие элементы. Если сцены нет, то размещать фигуры просто негде. Поэтому она всегда становится первым шагом в сборке любой 3D-системы.

Cameraзадаёт точку зрения. Один и тот же объект может выглядеть совершенно по-разному в зависимости от того, где находится камера и куда она смотрит. В Three.js камера не просто “смотрит”, а формирует сам способ восприятия пространства. Без неё сцена существует, но увидеть её невозможно.

Rendererотвечает за вывод. Он берёт сцену и камеру, вычисляет изображение и показывает его на экране. Именно рендерер связывает внутреннюю 3D-структуру с холстом в браузере. Получается, что он завершает всю систему.

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

Здесь создаются три базовых элемента Three.js. Сцена хранит объекты, камера задаёт перспективу, а рендерер выводит результат. Пока в системе ещё нет геометрии, но архитектура уже собрана. Это каркас, без которого дальнейшая работа невозможна.

Ниже ты соберёшь простую 3D-сцену шаг за шагом. Сначала появится пустое пространство, потом камера и рендерер, затем объект, а в конце — полноценная сцена с движением. Так будет легче увидеть, как работает базовая архитектура Three.js.

Техника

Собери простую 3D-сцену с одним объектом. В финальном варианте на экране должен появиться вращающийся куб в перспективе. Для этого нужно поэтапно собрать систему из сцены, камеры, рендерера и объекта.

В финальной версии на экране находится тёмный куб на светлом фоне. Камера смотрит на него под небольшим углом, а сам объект плавно вращается. Это минимальная, но уже полноценная сцена Three.js. Здесь впервые появляется настоящее ощущение 3D-пространства.

Здесь собраны все основные части системы. Сцена хранит объект, камера определяет точку зрения, а рендерер выводит всё на экран. Затем в цикле анимации куб плавно вращается, и сцена обновляется кадр за кадром. Это базовый шаблон, на котором строится большая часть проектов в Three.js.

Сначала создаётся пустая сцена и рендерер. Пока в ней нет объектов, но же есть сам холст и рабочее пространство. Это самый первый каркас будущей системы.

const width = app.clientWidth; // ширина области вывода
const height = app.clientHeight; // высота области вывода

const scene = new THREE.Scene(); // создаём 3D-сцену
scene.background = new THREE.Color(0xf8f8f8); // задаём цвет фона

const camera = new THREE.PerspectiveCamera(
50, // угол обзора
width / height, // соотношение сторон
0.1, // ближняя плоскость отсечения
1000 // дальняя плоскость отсечения
);

const renderer = new THREE.WebGLRenderer({ antialias: true }); // создаём рендерер
renderer.setSize(width, height); // подгоняем его под размер контейнера

app.innerHTML = ""; // очищаем прошлый результат
app.appendChild(renderer.domElement); // добавляем canvas в контейнер

renderer.render(scene, camera); // показываем сцену через камеру

Этот код создаёт контейнер вывода и инициализирует Three.js. Сцена пока пустая, поэтому на экране почти ничего не видно. Но важен сам факт: система уже существует и может рендериться.

Теперь добавляется камера. Без неё сцена остаётся невидимой, потому что у системы ещё нет точки зрения. Как только камера настроена, пространство начинает работать как полноценная 3D-среда.

`const width = app.clientWidth;
const height = app.clientHeight;

// сцена
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xf8f8f8);

// камера
const camera = new THREE.PerspectiveCamera(
50, width / height, 0.1, 1000 );
camera.position.z = 3;
camera.position.y = 0;
camera.lookAt(0, 0, 0);

// рендерер
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

app.innerHTML = "";
app.appendChild(renderer.domElement);

// вывод
renderer.render(scene, camera);

На следующем шаге в сцену добавляется сам объект. Это уже почти финальная версия: есть пространство, точка зрения и форма. Остаётся только сделать сцену более живой через движение. Здесь появляется перспектива и положение наблюдателя. Камера отодвигается назад, чтобы в будущем в поле зрения мог попасть объект. На этом этапе архитектура сцены уже почти собрана.

На следующем шаге в сцену добавляется сам объект. Это уже почти финальная версия: есть пространство, точка зрения и форма. Остаётся только сделать сцену более живой через движение.

Здесь создаётся куб и помещается в центр сцены. Камера уже видит его, а рендерер выводит результат на экран. Это почти готовая сцена — не хватает только анимации, которая появится в финальном варианте.

Вывод

1. Sceneсоздаёт пространство, в котором находятся объекты
2. Cameraзадаёт точку зрения и делает сцену видимой
3. Rendererвыводит результат на экран
4. Даже самая простая 3D-сцена строится как система из нескольких обязательных частей

Задание

Попробуй улучшить сцену самостоятельно. В коде ниже уже подготовлены варианты апгрейда: можно изменить цвет фона, форму объекта или скорость вращения. Раскомментируй строки по одной и посмотри, как меняется впечатление от пространства.

1. Раскомментируй замену геометрии, чтобы вместо куба появился шар
2. Попробуй изменить цвет материала и сделать объект светлее
3. Увеличь скорость вращения и сравни спокойное и активное движение
4. Измени цвет фона, чтобы по-другому почувствовать глубину сцены