#2 – Основные компоненты Three.js сцены

В каждой Three js сцене существует несколько ключевых компонентов, без которых не обойтись при создании трёхмерного пространства. Эти компоненты — основа для любого проекта, будь то простой пример с кубом или сложная анимация с множеством объектов. Мы рассмотрим основные элементы, которые должны быть в любой Three js сцене: сцена, камера, рендер, 3D-объекты и анимация.

1. Сцена (Scene)

Сцена — это место, где размещаются все объекты, источники света и эффекты. Можно сказать, что это контейнер для всего содержимого. Без сцены невозможно отображать объекты, так как именно она связывает все элементы вместе. В Three.js создание сцены очень просто:

const scene = new THREE.Scene();

На этом этапе вы создали пустое трёхмерное пространство, готовое для наполнения.

2. Камера (Camera)

Камера — это ваш виртуальный глаз, с помощью которого вы смотрите на сцену. В Three.js чаще всего используется перспективная камера, которая создаёт ощущение глубины. Для её настройки необходимо задать угол обзора, соотношение сторон и диапазон видимости:

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

Камера направлена на сцену, и вы можете управлять её положением для изменения точки обзора.

3. Рендер (Renderer)

Рендер отвечает за отображение сцены и объектов на экране. Он принимает камеру и сцену и выводит картинку в элемент HTML. В Three.js используется WebGLRenderer, который поддерживает все современные браузеры и обеспечивает высокую производительность:

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

После этого рендер привязывается к странице, и вы сможете видеть всё, что находится на сцене.

4. 3D-объекты (3D Objects)

Главный элемент любой сцены — это 3D-объекты. Они могут быть в форме простых примитивов (кубы, сферы и др.) или сложных моделей. Чтобы создать объект, необходимо задать его геометрию и материал:

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

Здесь мы создали зелёный куб и добавили его на сцену.

5. Анимация (Animation)

Анимация — важная часть интерактивных 3D-сцен. В Three.js для создания анимации используется рекурсивная функция animate, которая постоянно обновляет рендер, создавая плавное движение:

function animate() {
	requestAnimationFrame(animate);

	renderer.render(scene, camera);
}

animate();

Эта обновляет картинку на экране, что придаёт сцене динамику.