Цвет и текстуры

Цвет — это просто, текстуры — чуть интереснее. Разберём и то, и другое, а заодно поймём, что такое UV.

Текстура — это изображение, натянутое на поверхность меша. UV-развёртка задаёт, какая точка картинки приходится на какую точку 3D-формы.

Цвет

Цвет задают шестнадцатеричным числом — как в CSS, но с префиксом 0x вместо #. Можно и строкой, и через объект THREE.Color.

new THREE.MeshStandardMaterial({ color: 0xff6600 });   // hex-число
new THREE.MeshStandardMaterial({ color: '#ff6600' });  // строка
new THREE.Color(1, 0.4, 0);                            // r, g, b в диапазоне 0..1

Полезно уметь переводить привычные 0–255 в дробные 0–1, которые любит GPU. Это чистая арифметика — запустим.

function rgb255to01(r, g, b) {
  return [r / 255, g / 255, b / 255].map((v) => +v.toFixed(3));
}

console.log('Оранжевый 255,102,0 ->', rgb255to01(255, 102, 0));
console.log('Серый 128,128,128 ->', rgb255to01(128, 128, 128));

Вывод:

Оранжевый 255,102,0 -> [ 1, 0.4, 0 ]
Серый 128,128,128 -> [ 0.502, 0.502, 0.502 ]

Текстуры

Чтобы поверхность выглядела как кирпич или дерево, на неё натягивают картинку — текстуру. Загружают её через TextureLoader и передают в свойство map материала.

const loader = new THREE.TextureLoader();
const woodTexture = loader.load('/textures/wood.jpg');

const material = new THREE.MeshStandardMaterial({ map: woodTexture });

Загрузка асинхронная: картинка прилетит чуть позже, и Three.js сам обновит вид, когда она будет готова. Кроме базового цвета (map) бывают карты нормалей (normalMap), шероховатости (roughnessMap) и другие — они добавляют поверхности мелкий рельеф без лишних треугольников.

UV-развёртка по-простому

Как двумерная картинка ложится на трёхмерную форму? Через UV-координаты. Представьте, что вы разрезали и развернули поверхность модели в плоский лист, как выкройку. Каждая точка поверхности получает пару координат (u, v) от 0 до 1 — это адрес пикселя на картинке. У встроенных геометрий UV уже готовы, поэтому текстура на куб или сферу ложится сразу. У сложных моделей UV делает художник в 3D-редакторе.

Итог

Цвет — hex-число 0xRRGGBB, строка или THREE.Color (r,g,b в 0..1).
Текстуру грузят через TextureLoader и кладут в map; загрузка асинхронна.
UV-координаты связывают точки картинки с точками поверхности.