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

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

Тонкие линии

Тонкие линии создавать легче, но из-за ограничений, налагаемых ВебГЛ, они не могут быть толще 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Д-объектами и ХТМЛ-элементами.