Атрибуты вершин: position, normal, uv, color

В Three.js основой для создания 3D-геометрии служит объект BufferGeometry. Основной принцип работы с геометрией заключается в управлении атрибутами вершин, которые определяют форму, ориентацию, текстурирование и окраску объекта. Атрибуты хранятся в виде буферов (BufferAttribute или Float32BufferAttribute) и напрямую влияют на визуальное отображение.

Атрибут position

Атрибут position задаёт координаты вершин в локальной системе объекта. Каждый трёхмерный объект состоит из набора вершин, определяющих его форму.

const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array([
    0, 0, 0,  // вершина 1 (x, y, z)
    1, 0, 0,  // вершина 2
    0, 1, 0   // вершина 3
]);
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));

Ключевые моменты:

  • Аргумент 3 при создании Float32BufferAttribute указывает, что каждая вершина содержит три компонента: x, y и z.
  • Атрибут position обязателен для всех геометрий.
  • Изменение этого атрибута динамически позволяет анимировать форму объектов.

Атрибут normal

Атрибут normal задаёт нормали вершин, то есть векторные направления, перпендикулярные поверхности. Нормали необходимы для корректного освещения, особенно при использовании материалов с подсветкой (MeshStandardMaterial, MeshPhongMaterial).

const normals = new Float32Array([
    0, 0, 1,  // нормаль вершины 1
    0, 0, 1,  // нормаль вершины 2
    0, 0, 1   // нормаль вершины 3
]);
geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));

Особенности работы с нормалями:

  • Каждый вектор нормали должен быть нормализован (длина = 1).
  • Для плоских поверхностей нормали часто совпадают и указывают в одну сторону.
  • Для криволинейных поверхностей нормали можно вычислять автоматически через geometry.computeVertexNormals().

Атрибут uv

Атрибут uv определяет координаты текстурных координат для каждой вершины. Эти координаты лежат в диапазоне [0,1] и позволяют корректно накладывать текстуры.

const uvs = new Float32Array([
    0, 0,  // UV вершины 1
    1, 0,  // UV вершины 2
    0, 1   // UV вершины 3
]);
geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));

Важные моменты:

  • Каждый вектор uv содержит две компоненты: u и v.
  • Атрибут uv используется только материалами, поддерживающими текстуры (MeshBasicMaterial с map, MeshStandardMaterial и др.).
  • Неверные UV-координаты могут привести к растяжению или зеркальному отображению текстуры.

Атрибут color

Атрибут color задаёт цвет каждой вершины, что позволяет создавать градиенты или смешанные оттенки без текстур. Материал должен поддерживать вершинные цвета, например MeshBasicMaterial({ vertexColors: true }).

const colors = new Float32Array([
    1, 0, 0,  // красная вершина 1
    0, 1, 0,  // зелёная вершина 2
    0, 0, 1   // синяя вершина 3
]);
geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

Особенности:

  • Цвет задаётся в формате RGB, компоненты от 0 до 1.
  • Можно динамически изменять атрибут color для эффектов анимации или интерактивных визуализаций.
  • Атрибут color работает совместно с position, normal и uv, обеспечивая богатую визуальную выразительность.

Динамическое обновление атрибутов

Атрибуты в Three.js можно изменять после создания геометрии:

geometry.attributes.position.array[0] += 0.1;  // сдвиг x первой вершины
geometry.attributes.position.needsUpdate = true; // обязательно установить флаг обновления

Принципы обновления:

  • После изменения буфера нужно установить needsUpdate = true.
  • Для сложной анимации рекомендуется использовать BufferGeometry вместо старых Geometry, так как она оптимизирована для GPU.

Итоговые связи атрибутов

  • position – форма и расположение вершин.
  • normal – освещение и ориентация поверхности.
  • uv – наложение текстур.
  • color – окраска вершин, градиенты и эффекты.

Правильное понимание и использование этих атрибутов позволяет создавать эффективные и визуально богатые 3D-сцены, полностью контролируя форму, свет и текстуры объектов на уровне вершин.

Оглавление