Что такое Three.js и зачем он нужен

Разбираемся, что такое Three.js, почему он избавляет от боли «голого» WebGL и где его применяют.

Three.js — это JavaScript-библиотека, высокоуровневая обёртка над WebGL, которая позволяет рисовать и анимировать 3D-графику прямо в браузере, не погружаясь в ручную работу с шейдерами и матрицами.

Зачем вообще нужна обёртка над WebGL

Браузер умеет рисовать 3D через WebGL — это API к видеокарте (GPU). Проблема в том, что WebGL крайне низкоуровневый: чтобы показать один цветной треугольник, нужно вручную написать шейдеры на языке GLSL, создать буферы вершин, перемножить матрицы проекции и вида, настроить контекст. Сотни строк ради треугольника.

Three.js закрывает эту рутину. Вместо матриц вы думаете категориями, понятными человеку: «сцена», «камера», «куб», «свет», «поверни объект на 30 градусов». Библиотека сама собирает нужные матрицы и шейдеры и отдаёт их WebGL. Вы пишете в разы меньше кода и думаете о результате, а не о математике GPU.

Где это применяют

Three.js — один из самых популярных способов делать 3D в вебе. Типичные сценарии:

Конфигураторы товаров — покрутить кроссовок или автомобиль на сайте магазина.
Визуализации данных и архитектуры — интерактивные 3D-графики, цифровые двойники зданий.
Презентации и промо-сайты — «вау»-эффекты, скролл-анимации с 3D.
Лёгкие игры — браузерные 3D-игры без установки.
VR/AR в браузере через WebXR.

Как выглядит код

Чтобы почувствовать разницу, посмотрите на минимальный набросок сцены Three.js. Пока не вникайте в детали — важно увидеть, что код читается почти как описание словами.

import * as THREE from 'three';

// сцена — контейнер для всех объектов
const scene = new THREE.Scene();

// камера — откуда мы смотрим
const camera = new THREE.PerspectiveCamera(75, 2, 0.1, 1000);
camera.position.z = 5;

// рендерер — кто рисует картинку
const renderer = new THREE.WebGLRenderer();
renderer.setSize(800, 600);
document.body.appendChild(renderer.domElement);

// куб = геометрия + материал
const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1, 1, 1),
  new THREE.MeshBasicMaterial({ color: 0x00ff88 })
);
scene.add(cube);

renderer.render(scene, camera);

Этот код использует WebGL и DOM, поэтому в нашей песочнице он не запускается (здесь нет настоящего браузерного canvas и библиотеки THREE). На сайте подобные примеры даны как образец для чтения — копируйте их в свой проект. А вот чистую математику 3D мы будем запускать прямо на странице кнопкой «Запустить».

Three.js — это не игровой движок

Важно не путать ожидания. Three.js — это библиотека рендеринга, а не полноценный движок вроде Unity. В нём из коробки нет физики, редактора уровней, системы сцен-ассетов или готового геймплея. Он отлично рисует, а физику, звук и логику вы добавляете отдельными библиотеками. Зато он лёгкий, гибкий и работает в любом браузере без установки.

Итог

Three.js — обёртка над WebGL: 3D в браузере без ручных шейдеров и матриц.
Применяют для конфигураторов, визуализаций, промо-сайтов, лёгких игр, VR/AR.
Это библиотека рендеринга, а не игровой движок: физику и геймплей подключают отдельно.