Три кита сцены: Scene, Camera, Renderer

Любая картинка в Three.js — это связка трёх объектов. Понять их роли — значит понять половину библиотеки.

Формула любой сцены: Scene (что рисуем) + Camera (откуда смотрим) + Renderer (кто рисует) → картинка на canvas.

Аналогия: съёмка фильма

Представьте съёмочную площадку. Scene — это сама площадка с декорациями и актёрами. Camera — киноаппарат: где он стоит и какой у него объектив, то и попадёт в кадр. Renderer — это процесс проявки: он берёт площадку и камеру и выдаёт готовый кадр. Меняете любой из трёх — меняется итоговая картинка.

Scene — контейнер

Сцена (THREE.Scene) — это корень всего. В неё вы добавляете объекты (меши), источники света и даже камеры. Технически это граф сцены: дерево узлов, где у объектов могут быть дочерние объекты. Двигаете родителя — двигаются дети.

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x202024); // цвет фона
scene.add(cube);
scene.add(light);

Camera — точка обзора

Камера задаёт, как 3D-мир проецируется на плоский экран. Чаще всего используют PerspectiveCamera — она имитирует человеческий глаз: дальние объекты кажутся меньше. У неё четыре главных параметра, к которым мы вернёмся в разделе про камеры: угол обзора, соотношение сторон и две плоскости отсечения.

// fov, aspect, near, far
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
camera.position.set(0, 0, 5); // отодвинули камеру назад, чтобы видеть сцену

Важный момент для новичка: по умолчанию камера стоит в точке (0,0,0) — ровно там же, где появляется первый куб. Вы окажетесь «внутри» объекта и ничего не увидите. Поэтому камеру почти всегда отодвигают: camera.position.z = 5.

Renderer — кто рисует

Рендерер (WebGLRenderer) — это тот, кто превращает описание сцены в пиксели. Он создаёт элемент <canvas>, который вы вставляете на страницу, и у него есть главный метод render(scene, camera).

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio); // чёткость на retina
document.body.appendChild(renderer.domElement);

renderer.render(scene, camera); // один кадр

Как они связаны

Вызов renderer.render(scene, camera) рисует ровно один кадр. Чтобы появилось движение, этот вызов нужно повторять много раз в секунду — об этом следующие уроки.

Итог

• Scene хранит объекты и свет, Camera задаёт обзор, Renderer рисует кадр.
• Камеру почти всегда отодвигают от центра, иначе вы внутри объекта.
• renderer.render(scene, camera) — один кадр; для анимации его повторяют.