Line, LineSegments, LineLoop

В библиотеке Three.js линии представляют собой объекты, позволяющие создавать и отображать соединения между точками в 3D-пространстве. Основными классами для работы с линиями являются Line, LineSegments и LineLoop. Все они наследуются от базового класса Object3D и используют геометрию BufferGeometry для определения точек.

Линии не имеют объёма в традиционном понимании, их толщина задаётся в пределах возможностей рендеринга WebGL. Важной особенностью является то, что линия визуализируется как последовательность соединённых точек, а не как объект с физической толщиной.

Класс Line

Line используется для построения непрерывной линии, соединяющей все вершины геометрии последовательно.

Синтаксис создания:

const geometry = new THREE.BufferGeometry();
geometry.setFromPoints([new THREE.Vector3(0,0,0), new THREE.Vector3(1,1,0), new THREE.Vector3(2,0,0)]);

const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
const line = new THREE.Line(geometry, material);

scene.add(line);

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

  • Линия соединяет все точки по порядку.
  • Если в геометрии N точек, будет создана N−1 сегментов.
  • Поддерживается как одностороннее, так и двустороннее отображение с помощью материала.
  • Материал LineBasicMaterial и LineDashedMaterial — единственные стандартные материалы для линий.

LineDashedMaterial позволяет создавать пунктирные линии с использованием параметров:

  • dashSize — длина «штриха»
  • gapSize — длина промежутка
  • scale — масштабирование шаблона штрихов

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

geometry.computeLineDistances();

Класс LineSegments

LineSegments используется для создания отдельных сегментов между точками попарно. Каждая пара вершин создаёт отдельный сегмент, не соединяясь с соседними парами.

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

const points = [
    new THREE.Vector3(0,0,0), new THREE.Vector3(1,0,0),
    new THREE.Vector3(0,1,0), new THREE.Vector3(1,1,0)
];

const geometry = new THREE.BufferGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color: 0x00ff00 });
const lineSegments = new THREE.LineSegments(geometry, material);

scene.add(lineSegments);

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

  • Если в массиве N точек, создаются N/2 сегментов (каждая пара формирует сегмент).
  • Полезно для визуализации сеток, осей, схем соединений.
  • Работает быстрее, чем Line, для множества отдельных линий, так как не создаёт непрерывную цепочку.

Класс LineLoop

LineLoop строит непрерывную линию, соединяя все точки, а последняя вершина автоматически соединяется с первой, замыкая контур.

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

const points = [
    new THREE.Vector3(0,0,0),
    new THREE.Vector3(1,0,0),
    new THREE.Vector3(1,1,0),
    new THREE.Vector3(0,1,0)
];

const geometry = new THREE.BufferGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color: 0x0000ff });
const lineLoop = new THREE.LineLoop(geometry, material);

scene.add(lineLoop);

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

  • Полезно для построения контуров, замкнутых фигур и полигонов.
  • Замыкание происходит автоматически — последняя точка соединяется с первой.
  • Поддерживает те же материалы, что и Line.

Работа с геометрией линий

В Three.js для линий чаще всего используется BufferGeometry. Основные методы:

  • setFromPoints(pointsArray) — формирует геометрию из массива Vector3.
  • computeLineDistances() — вычисляет длины сегментов, обязательно для пунктирных линий.

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

const points = [];
for(let i = 0; i < 10; i++){
    points.push(new THREE.Vector3(i, Math.sin(i), 0));
}
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color: 0xffff00 });
const line = new THREE.Line(geometry, material);
scene.add(line);

Материалы и визуальные эффекты

LineBasicMaterial — простой материал с одним цветом, не реагирует на освещение. LineDashedMaterial — позволяет создавать пунктирные линии, требует вызова computeLineDistances().

Дополнительные параметры:

  • linewidth — толщина линии (поддержка зависит от платформы и браузера).
  • color — цвет линии, может быть передан как hex или Color.
  • opacity и transparent — для прозрачных линий.

Практические советы

  • Для визуализации сеток и осей лучше использовать LineSegments.
  • Для замкнутых форм — LineLoop.
  • Для непрерывных кривых и графиков — Line.
  • Пунктирные линии требуют вызова computeLineDistances(), иначе штрихи не отобразятся.
  • Большое количество точек может замедлить рендеринг; в таких случаях стоит рассмотреть использование LineSegments для разрозненных линий.

Анимация линий

Линии можно анимировать, изменяя координаты вершин в BufferGeometry. Пример движения точки вдоль линии:

const positions = geometry.attributes.position.array;
positions[0] += 0.01; // смещение первой точки по оси X
geometry.attributes.position.needsUpdate = true;

Для пунктирных линий может потребоваться повторный вызов computeLineDistances(), если изменяются координаты.

Использование с другими объектами

Линии могут быть частью сложных сцен с Mesh-объектами, камерами и освещением. Они не отбрасывают тени и не участвуют в освещении при использовании LineBasicMaterial. Для интерактивных эффектов можно комбинировать линии с Raycaster для проверки пересечений с другими объектами.

Эта структура позволяет создавать гибкие визуализации сеток, графиков, контуров и любых соединений в 3D-сценах, используя Line, LineSegments и LineLoop в Three.js.

Оглавление