MeshLine

MeshLine – класс описывающий линии для отрисовки в виде полигональной сетки. Расширяет THREE.Mesh.

export class MeshLine extends THREE.Mesh {
  override material: MeshLineMaterial;
  override geometry: MeshLineGeometry;

 constructor(geometry?: MeshLineGeometry, material?: MeshLineMaterial);
}

Конструктор

  constructor(geometry?: MeshLineGeometry, material?: MeshLineMaterial);

где:
geometry – геометрия, опциональный параметр. Если не задано, используется пустая геометрия.
material – материал линий, опциональный параметр. Если не задано, используется материал по умолчанию.

Поля

material: MeshLineMaterial

Материал линий. Подробнее MeshLineMaterial.

  material: MeshLineMaterial;

geometry: MeshLineGeometry

Геометрия линий. Подробнее MeshLineGeometry.

  geometry: MeshLineGeometry;

MeshLineMaterial

MeshLineMaterial – материал для отрисовки линий в виде полигональной сетки.

export class MeshLineMaterial extends THREE.ShaderMaterial {
  constructor(parameters: MeshLineMaterialParameters);

  get linewidth(): number;
  set linewidth(value: number);

  get opacity(): number;
  set opacity(value: number);

  get worldUnits(): boolean;
  set worldUnits(value: boolean);

  get dashed(): boolean;
  set dashed(value: boolean);

  get resolution(): THREE.Vector2;

  color: THREE.Color;

  dashScale: number;

  dashSize: number;

  dashOffset: number;

  gapSize: number;
}

Конструктор

  constructor(parameters: MeshLineMaterialParameters);

где:
parameters – параметры материала. Подробнее MeshLineMaterialParameters.

Свойства

worldUnits: boolean

Определяет в каком пространстве задана ширина линий. Если true, то ширина линий задана в мировых координтах и на линию будет влиять перспектива - размер линии будет уменьшаться с глубиной кадра. В противном случае, размер линии считается в пикселях и остаетя неизменным, переспектива не оказывает влияния на ширину линиии.

  get worldUnits(): boolean;
  set worldUnits(value: boolean);

По умолчанию: true.

dashed: boolean

Определяет является ли линия пунктирной.
Для отрисовки пунктирной линии также необходимо вычислить расстояния между точками в MeshLineGeometry. Подробнее: MeshLineGeometry.computeLineDistances.

  get dashed(): boolean;
  set dashed(value: boolean);

По умолчанию: false.

resolution: THREE.Vector2

Задает и получает размеры области отрисовки. Нужно для корректной отрисовки линий в worldUnits = false режиме. Данное свойство обновляется автоматически перед отрисовкой.

  get resolution(): THREE.Vector2;
  set resolution(value: THREE.Vector2);

Подробнее: THREE.Vector2.

Поля

color: THREE.Color

Определяет значение цвета линий. Общий цвет для всех линий применяется если в материале свойство vertexColors установлено в false (значение по умолчанию).

  color: THREE.Color;

По умолчанию: new THREE.Color(0xffffff). Подробнее: Color.

dashScale: boolean

Определяет коэффициент-делитель для пунктира. Длина пунктирного отрезка (длина штриха + длина пустого промежутка) делится на данный коэффициент.
Например значение dashScale = 2 приведёт к уменьшению длины пунктирного отрезка в два раза и соответственному увеличению частоты штрихов в линии, тоже в два раза.

  dashScale: number;

По умолчанию: 1.

dashSize: boolean

Определяет длину штриха в пунктирном отрезке.

  dashSize: number;

По умолчанию: 1.

dashOffset: boolean

Определяет смещение штриха в пунктирном отрезке.

  dashOffset: number;

По умолчанию: 0.

gapSize: boolean

Определяет длину пустого промежутка в пунктирном отрезке.

  gapSize: number;

По умолчанию: 1.

MeshLineMaterialParameters

Параметры MeshLineMaterial. Задают соответствующие свойства MeshLineMaterial.

export interface MeshLineMaterialParameters extends THREE.ShaderMaterialParameters {
  color?: THREE.ColorRepresentation | undefined;
  dashed?: boolean | undefined;
  dashScale?: number | undefined;
  dashSize?: number | undefined;
  dashOffset?: number | undefined;
  gapSize?: number | undefined;
  linewidth?: number | undefined;
  resolution?: THREE.Vector2 | undefined;
  worldUnits?: boolean | undefined;
}

MeshLineGeometry

Геометрия, используемая для отрисовки линий в виде полигональной сетки. Линии задаются указанием точек.

export class MeshLineGeometry extends THREE.InstancedBufferGeometry {

  constructor();

  setPoints(points: THREE.Vector3[]): this;

  setPositions(array: ArrayLike<number>): this;

  setColors(array: ArrayLike<number>): this;

  computeLineDistances(): this;

  updatePoint(index: number, point: THREE.Vector3): void;

  updateColor(index: number, color: Color): void;
}

Методы

setPoints()

Метод задает точки линии.

  setPoints(points: THREE.Vector3[]): this;

где:
points – точки линии. Подробнее: THREE.Vector3.

При вызове этого метода происходит перестроение атрибутов геометрии, что является ресурсозатратной операцией. Поэтому, для изменения координат точек, если количество точек не изменяется, следует использовать метод updatePoint.
Если нужно отрисовать пунктирную линию, то следует пересчитать расстояния между точками с помощью computeLineDistances.

setPositions()

Метод задает точки линии из координат переданных в виде массива.

  setPositions(array: ArrayLike<number>): this;

где:
array – массив с координатами точек. Координаты расположены последовательно, по 3 элемента на точку: [ x0, y0, z0, x1, y1, z1, ... ].

При вызове этого метода происходит перестроение атрибутов геометрии, что является ресурсозатратной операцией. Поэтому, для изменения координат точек, если количество точек не изменяется, следует использовать метод updatePoint.
Если нужно отрисовать пунктирную линию, то следует пересчитать расстояния между точками с помощью computeLineDistances.

setColors()

Метод задает цвета отдельных участков линии. Цвета действуют в окрестностях точек к которым применяются, то есть все отрезки между точками будут поделены пополам и каждая половина будет окрашена в цвет ближайшей примыкающей точки. Если цвета не заданы, то для всей линии используется цвет материала: MeshLineMaterial.color.
Цвета применяются, только если в MeshLineMaterial свойство vertexColors установлено в true.

  setColors(array: ArrayLike<number>): this;

где:
array – массив со значенями цветов точек. Значения расположены последовательно, по 4 элемента на точку: [ r0, g0, b0, a0, r1, g1, b1, a1, ... ].

При вызове этого метода происходит перестроение атрибутов геометрии, что является ресурсозатратной операцией. Поэтому, для изменения цветов точек, если количество точек не изменяется, следует использовать метод updateColor.

computeLineDistances()

Метод вычисляет расстояния между точками и сохраняет значения в атрибуты геометрии. Необходимо только для отрисовки пунктирных линий.

  computeLineDistances(): this;

updatePoint()

Метод обновляет координаты точки, без перестроения всей геометрии.

  updatePoint(index: number, point: THREE.Vector3): void;

где:
index – порядковый номер точки.
point – обновлённые координаты точки. Подробнее: THREE.Vector3.

Если нужно отрисовать пунктирную линию, то следует пересчитать расстояния между точками с помощью computeLineDistances.

updateColor()

Метод обновляет цвет точки, без перестроения всей геометрии.

  updateColor(index: number, color: Color): void;

index – порядковый номер точки.
color – обновлённый цвет точки. Подробнее: Color.