three.js

Что это такое

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

Это не игровой движок в полном смысле. three.js дает графический слой и множество примеров, а логику игры, физику, состояние и интерфейс приложения разработчик собирает сам или подключает отдельными библиотеками.

Как появился и почему прижился

Проект начался в период, когда 3D в браузере было сложной низкоуровневой задачей. three.js предложил более дружелюбную модель: писать сцену на JavaScript и получать результат в обычном браузере без установки отдельного плеера.

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

Что лежит внутри

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

import * as THREE from "three";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(70, innerWidth / innerHeight, 0.01, 10);
camera.position.z = 1;

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(0.2, 0.2, 0.2),
  new THREE.MeshNormalMaterial()
);
scene.add(cube);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

renderer.setAnimationLoop((time) => {
  cube.rotation.y = time / 1000;
  renderer.render(scene, camera);
});

Где полезен

three.js полезен там, где 3D должно жить прямо в веб-продукте: интерактивный просмотр товара, карта помещения, учебная симуляция, визуализация молекул, сцена для игры или редактор материалов.

Если нужна готовая игровая архитектура с физикой, сценами, ассетами и редактором, один three.js может быть слишком низким уровнем. Зато для встраиваемой графики и нестандартных интерфейсов эта гибкость часто важнее.

Сильные стороны и ограничения

Сильная сторона — зрелость и огромная база примеров. Почти любую типовую задачу можно сначала найти в официальной галерее, а потом адаптировать.

Ограничение — производительность и сложность сцены остаются ответственностью разработчика. Оптимизация моделей, текстур, теней и числа объектов не исчезает только потому, что библиотека удобная.