LineBasicMaterial и LineDashedMaterial

В Three.js линии создаются при помощи объектов типа THREE.Line, THREE.LineSegments или THREE.LineLoop. Для их визуализации используются материалы LineBasicMaterial и LineDashedMaterial, которые предоставляют базовые возможности для задания цвета, прозрачности и стиля линий.

THREE.LineBasicMaterial — это простой материал для линий, позволяющий задавать цвет, прозрачность и толщину. Он идеально подходит для создания сплошных линий без эффектов прерывания или штриховки.

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

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

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

Ключевые параметры LineBasicMaterial:

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

Использование LineDashedMaterial

THREE.LineDashedMaterial расширяет возможности стандартного материала, позволяя создавать пунктирные линии. В отличие от LineBasicMaterial, он поддерживает параметры, определяющие длину штриха и промежутки.

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

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

const material = new THREE.LineDashedMaterial({
  color: 0x0000ff,
  dashSize: 1,
  gapSize: 0.5,
  linewidth: 2
});

const line = new THREE.Line(geometry, material);
line.computeLineDistances(); // обязательно для работы штриховки
scene.add(line);

Обязательный шаг: метод computeLineDistances() вычисляет расстояния между вершинами и позволяет корректно отображать штрихи. Без него линия будет отображаться как сплошная.

Основные свойства LineDashedMaterial:

  • color — цвет линии.
  • dashSize — длина штриха.
  • gapSize — длина промежутка между штрихами.
  • scale — масштабирование штриховой структуры (умножает dashSize и gapSize).
  • linewidth — толщина линии.
  • opacity и transparent — управление прозрачностью аналогично LineBasicMaterial.

Геометрия и производительность

Для линий рекомендуется использовать THREE.BufferGeometry, а не THREE.Geometry, так как BufferGeometry более оптимизирован для WebGL. В BufferGeometry вершины передаются массивом Float32Array, что позволяет эффективно обрабатывать тысячи линий.

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

const points = [];
for (let i = 0; i < 100; i++) {
  points.push(new THREE.Vector3(Math.sin(i * 0.1) * 10, Math.cos(i * 0.1) * 10, i * 0.5));
}
const geometry = new THREE.BufferGeometry().setFromPoints(points);

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

Для больших сеток и сетевых структур LineSegments позволяет соединять пары вершин, минимизируя количество объектов и увеличивая производительность сцены.

Визуальные эффекты и прозрачность

LineBasicMaterial и LineDashedMaterial поддерживают стандартные свойства прозрачности и смешивания:

  • opacity от 0 до 1, где 0 — полностью прозрачная линия, 1 — полностью непрозрачная.
  • transparent: true обязателен для работы прозрачности.
  • blending — можно использовать для эффектов наложения (THREE.AdditiveBlending, THREE.SubtractiveBlending).

Пример комбинированной прозрачной пунктирной линии:

const material = new THREE.LineDashedMaterial({
  color: 0xff00ff,
  dashSize: 0.5,
  gapSize: 0.2,
  opacity: 0.7,
  transparent: true
});

line.computeLineDistances();
scene.add(line);

Советы по работе с линиями

  1. Ширина линий: многие платформы ограничивают реальную ширину линии до 1 пикселя. Для сложных эффектов используют трубки через THREE.TubeGeometry.
  2. Пунктирные линии: всегда вызывать computeLineDistances(). Без этого параметры dashSize и gapSize не будут применены.
  3. Большие наборы линий: использовать LineSegments вместо множества объектов Line, это экономит ресурсы.
  4. Анимация линий: можно динамически изменять вершины геометрии через geometry.attributes.position и вызывать geometry.attributes.position.needsUpdate = true.

Итоговые рекомендации по материалам

  • LineBasicMaterial — быстрый, простой и универсальный для сплошных линий.
  • LineDashedMaterial — выбор для пунктирных или штриховых линий, требует вычисления расстояний между вершинами.
  • Для сложных визуализаций или толстых линий следует рассматривать TubeGeometry или кастомные шейдеры.

Оба материала интегрируются со стандартными сценами Three.js, поддерживают прозрачность, цвет и базовые эффекты смешивания, обеспечивая гибкость для визуализации 2D и 3D графики, сетей, графов и схем.

Оглавление