Drawing Lines

In this guide we show how to create and render lines using Verge3D API.

Thin Lines

Thin lines are easier to create, but due to limitations imposed by WebGL, cannot be thicker than 1px. Do draw such lines first define a LineBasicMaterial material.


    // create a blue LineBasicMaterial
    const material = new v3d.LineBasicMaterial({ color: 0x0000ff });

After material we will need a geometry with some vertices:


    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);

Note that lines are drawn between each consecutive pair of vertices, but not between the first and last (the line is not closed).

Now that we have points for two lines and a material, we can put them together to form a line:


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

All that's left is to add it to the scene.


    app.scene.add(line);

You should now be seeing an arrow pointing upwards, made from two blue lines.

Thick Lines

Thick lines created by MeshLine or MeshLineIndexed class depending on the source data you provide. Similarly to thin lines they require a special material which is now called MeshLineMaterial.


    // create a blue MeshLineMaterial
    const material = new v3d.MeshLineMaterial({ color: 0x0000ff, lineWidth: 0.3 });

lineWidth is the absolute width of the line in world units, not the pixel size.

To generate the line with triangulated geometry you need to pass some points to 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);

The good thing, is that such geometry can be used with regular Mesh objects:


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

Adding this mesh to the scene will get you the same arrow, but way thicker:


    app.scene.add(mesh);

Drawing Lines

Thin Lines

Thick Lines

See Also