Материалы: Basic, Lambert, Phong, Standard

Один и тот же объект с разным материалом выглядит совершенно по-разному. Разбираем четыре главных материала.

Материал описывает, как поверхность выглядит и реагирует на свет. От его выбора зависит, будет объект «плоской заливкой» или реалистичным металлом.

Четыре рабочих лошадки

Материал	Реагирует на свет?	Когда брать
`MeshBasicMaterial`	нет	отладка, плоские элементы, «нарисованные» объекты
`MeshLambertMaterial`	да, дёшево	матовые поверхности, когда важна скорость
`MeshPhongMaterial`	да, с бликами	глянец, пластик (старый подход)
`MeshStandardMaterial`	да, физически	реализм — современный выбор по умолчанию

Basic — без света

MeshBasicMaterial вообще не учитывает освещение: он показывает заданный цвет одинаково ярко со всех сторон. Объект выглядит плоско, как наклейка. Зато его видно всегда — удобно, когда вы только проверяете, что меш на месте.

const mat = new THREE.MeshBasicMaterial({ color: 0x3399ff });

Standard — физически корректный (PBR)

Современный реализм даёт MeshStandardMaterial. Он построен на PBR (Physically Based Rendering — физически корректный рендеринг) и описывает поверхность двумя интуитивными параметрами:

roughness (шероховатость) — от 0 (зеркало) до 1 (матовый мел);
metalness (металличность) — от 0 (диэлектрик: дерево, пластик) до 1 (металл).

const metal = new THREE.MeshStandardMaterial({
  color: 0xaaaaaa,
  roughness: 0.2,
  metalness: 0.9
});

Комбинируя эти два числа, вы получаете от матового пластика до полированного хрома — и всё это реалистично реагирует на источники света.

Какой выбрать

Практическое правило: по умолчанию берите Standard — он выглядит современно и правдоподобно. Basic — когда свет не нужен (отладка, плоские иконки). Lambert/Phong — когда важна максимальная скорость на слабых устройствах и можно пожертвовать реализмом. Но помните: Standard, Lambert и Phong требуют, чтобы на сцене был свет, — иначе объект будет чёрным. Об этом отдельный урок.

Общие свойства материалов

Независимо от типа, у материалов есть набор общих настроек, которые быстро пригодятся:

transparent: true + opacity — полупрозрачность (стекло, вода, дымка).
wireframe: true — показать только рёбра-каркас; незаменимо для отладки геометрии.
side — какие грани рисовать: только лицевые (по умолчанию), только обратные или обе (THREE.DoubleSide). Полезно для тонких плоскостей вроде листа бумаги, которые иначе исчезают, если смотреть «с изнанки».
flatShading: true — гранёный, «низкополигональный» вид вместо сглаженного.

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

Итог

Basic не реагирует на свет, остальные — реагируют.
Standard — PBR, реалистичный, выбор по умолчанию; настраивается roughness и metalness.
Материалам, кроме Basic, нужен свет на сцене.