Рисование линий - Руководство по Вердж3Д - Софт Эйт Софт
Description: Узнайте как использовать Рисование линий в интерактивных 3Д-веб-приложениях сделанных на Вердж3Д

# Рисование линий в «Вердж3Д»

В этом руководстве мы покажем, как создавать и отображать линии с помощью «Вердж3Д» API.

- Тонкие линии
- Толстые линии

#

## Тонкие линии

Тонкие линии создавать легче, но из-за ограничений, налагаемых WebGL, они не могут быть толще 1 пикселя. Чтобы нарисовать такие линии, сначала потребуется создать LineBasicMaterial материал.

`// создаем синий LineBasicMaterial const material = new v3d.LineBasicMaterial({ color: 0x0000ff });`

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

`const points = []; points.push(new v3d.Vector3(-10, 0, 0)); points.push(new v3d.Vector3( 0, 10, 0)); points.push(new v3d.Vector3( 10, 0, 0)); const geometry = new v3d.BufferGeometry().setFromPoints(points);`

Обратите внимание, что линии рисуются между каждой последовательной парой вершин, а не между первой и последней (линия не замкнута).

Теперь, когда у нас есть точки для двух линий и материал, мы можем соединить их в линию:

`const line = new v3d.Line(geometry, material);`

Осталось только добавить его на сцену.

`app.scene.add(line);`

Теперь вы должны увидеть стрелку, направленную вверх, состоящую из двух синих линий.

#

## Толстые линии

Толстые линии создаются с помощью класса MeshLine или MeshLineIndexed в зависимости от исходных данных. Как и тонкие линии, для них требуется специальный материал, который теперь называется MeshLineMaterial.

`// создаем синий MeshLineMaterial const material = new v3d.MeshLineMaterial({ color: 0x0000ff, lineWidth: 0.3 });`

`lineWidth` — это абсолютная ширина линии в единицах сцены, а не размер пикселя.

Чтобы создать линию с триангулированной геометрией, вам нужно передать несколько точек в MeshLineIndexed.

`const points = []; points.push(new v3d.Vector3(-10, 0, 0)); points.push(new v3d.Vector3( 0, 10, 0)); points.push(new v3d.Vector3( 10, 0, 0)); const geometry = new v3d.BufferGeometry().setFromPoints(points); const line = new v3d.MeshLineIndexed(); line.fromBufferGeometry(geometry);`

Данная геметория хороша тем, что её можно использовать с обычными объектами класса Mesh:

`const mesh = new v3d.Mesh(line.geometry, material);`

Добавив этот меш в сцену, вы получите ту же стрелку, но гораздо толще:

`app.scene.add(mesh);`

## Дальнейшие шаги

Класс LineHTML можно использовать для рисования линий между 3Д-объектами и HTML-элементами.