Mesh: геометрия и материал

В Three.js объект Mesh представляет собой комбинацию геометрии и материала. Геометрия определяет форму объекта в 3D-пространстве, а материал — способ визуализации этой формы. Синтаксис создания Mesh выглядит следующим образом:

const mesh = new THREE.Mesh(geometry, material);

Где geometry — объект класса BufferGeometry или его наследников, а material — объект класса Material или его подклассов.

Геометрия (Geometry)

Three.js использует BufferGeometry как основной класс для описания форм объектов. BufferGeometry хранит данные о вершинах, нормалях, UV-координатах и индексах треугольников. Основные типы встроенных геометрий:

  • BoxGeometry — куб или прямоугольный параллелепипед.
  • SphereGeometry — сфера.
  • PlaneGeometry — плоскость.
  • CylinderGeometry — цилиндр.
  • TorusGeometry — тор.
  • ConeGeometry — конус.
  • TorusKnotGeometry — сложный тор с узлом.

Пример создания куба:

const geometry = new THREE.BoxGeometry(1, 1, 1);

BufferGeometry позволяет создавать кастомные объекты путем прямого задания массивов вершин и индексов:

const vertices = new Float32Array([
    0, 0, 0,   // вершина 1
    1, 0, 0,   // вершина 2
    0, 1, 0    // вершина 3
]);

const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));

Материалы (Material)

Материал отвечает за визуальное отображение объекта. В Three.js доступно несколько типов материалов:

  • MeshBasicMaterial — базовый материал, не реагирует на свет.
  • MeshStandardMaterial — физически корректный материал (PBR), реагирует на свет.
  • MeshPhongMaterial — отражает свет с использованием модели Фонга.
  • MeshLambertMaterial — отражает рассеянный свет.
  • MeshPhysicalMaterial — расширение MeshStandardMaterial с эффектами металлическости, прозрачности и преломления.
  • ShaderMaterial — позволяет полностью управлять шейдерами.

Пример использования материала:

const material = new THREE.MeshStandardMaterial({ color: 0xff0000, metalness: 0.5, roughness: 0.7 });

Создание Mesh

Комбинируя геометрию и материал, создается полноценный объект Mesh:

const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

Основные свойства Mesh

  • position — задает положение объекта в пространстве (mesh.position.set(x, y, z)).
  • rotation — вращение по осям (mesh.rotation.x = Math.PI / 2).
  • scale — масштабирование (mesh.scale.set(2, 1, 1)).
  • visible — видимость объекта (true/false).
  • castShadow и receiveShadow — управление тенями.

Работа с несколькими материалами

Mesh может использовать несколько материалов через массив. Для этого геометрия должна иметь группы (groups) вершин:

geometry.clearGroups();
geometry.addGroup(0, 6, 0); // первые 6 индексов — материал 0
geometry.addGroup(6, 6, 1); // следующие 6 индексов — материал 1

const materials = [
    new THREE.MeshBasicMaterial({ color: 0xff0000 }),
    new THREE.MeshBasicMaterial({ color: 0x0000ff })
];

const mesh = new THREE.Mesh(geometry, materials);

Применение текстур

Материалы могут использовать текстуры, загруженные через TextureLoader:

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('texture.jpg');

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

Дополнительно доступны карты нормалей (normalMap), спекуляра (specularMap), эмиссии (emissiveMap) и альфа-канала (alphaMap).

Взаимодействие с Mesh

  • События и Raycaster — объекты Mesh можно использовать для выбора и наведения курсора.
  • Анимация — Mesh поддерживает трансформации через position, rotation, scale и может анимироваться через GSAP, Three.js AnimationMixer или пользовательские шейдеры.
  • Прозрачность и смешивание — материалы можно делать прозрачными (material.transparent = true) и задавать режим смешивания (material.blending).

Оптимизация

  • Использование BufferGeometry вместо устаревшей Geometry.
  • Совмещение нескольких объектов через InstancedMesh для снижения количества draw calls:
const instancedMesh = new THREE.InstancedMesh(geometry, material, 100);
for (let i = 0; i < 100; i++) {
    const matrix = new THREE.Matrix4().makeTranslation(i, 0, 0);
    instancedMesh.setMatrixAt(i, matrix);
}
scene.add(instancedMesh);
  • Ограничение числа полигонов в геометриях.
  • Использование LOD (Level of Detail) для объектов на дальнем плане.

Примеры расширенного использования

  • Кастомные шейдеры: с ShaderMaterial можно изменять визуальный стиль, создавать эффекты воды, огня, прозрачности.
  • Комбинирование с анимациями: Mesh может управляться через скелетные анимации (SkinnedMesh).
  • Множественные слои материалов: MeshStandardMaterial поддерживает использование нескольких текстурных слоев и карт для более сложной визуализации.

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

Оглавление