threepipe/website/notes/fat-lines.md

---

next: text: ‘GLTF Fat/Mesh Lines’ link: ‘./gltf-mesh-lines’

prev: false

aside: false

Fat Lines: Spiral Example

This example shows how to use ThreePipe’s fat lines (MeshLine) to draw a thick, colorful spiral. The spiral’s shape and color are generated in code, and you can adjust its parameters live using the UI.

How it works:

• The spiral is made by calculating 3D positions in a loop, using radius, height, and loops for shape.
• Each point gets a color, creating a gradient from blue to red.
• MeshLine (an extension of three.js Line2) is used to make the line thick and support per-vertex colors.
• The UI lets you change the spiral’s radius, height, and loops, and see updates instantly.

Key code:

function makeSpiral(radius = 1, height = 2, loops = 10) {
    const positions = [], colors = []
    for (let i = 0; i <= 1000; i++) {
        const t = i / 1000, angle = t * Math.PI * 2 * loops
        positions.push(radius * Math.cos(angle), radius * Math.sin(angle), t * height - height/2)
        colors.push(t, 0, 1-t)
    }
    return {positions, colors}
}

const line = new MeshLine(new LineGeometry2(), new LineMaterial2())
line.material.vertexColors = true
line.material.linewidth = 5
function updateSpiral() {
    const {positions, colors} = makeSpiral(spiral.radius, spiral.height, spiral.loops)
    line.geometry.setPositions(positions)
    line.geometry.setColors(colors)
    line.material.setDirty()
}

The line and its controls are added to the UI with Tweakpane:

ui.appendChild({
    type: 'folder',
    label: 'Spiral',
    children: generateUiConfig(spiral),
    onChange: updateSpiral,
})
ui.appendChild(line.uiConfig)

See the full code here, live example on threepipe.org/examples.

::: warning Fat lines (MeshLine) cannot be exported with glTF. If you want to create lines that can be exported as glTF lines, use three.js Line directly (for now). :::

Features of MeshLine

• Adjustable thickness: Unlike standard three.js lines, fat lines can be any width, not just 1 pixel.
• Per-vertex color: Supports gradients and color effects along the line.
• UI integration: Easily expose line and spiral parameters for live editing.
• Performance: Efficiently renders thousands of segments as a single mesh.

How Fat Lines Work Under the Hood

ThreePipe’s MeshLine is built on top of the three.js Line2 addon. Instead of drawing a single-pixel line, it creates a mesh strip along the path, allowing for thick, anti-aliased lines. The geometry stores positions and colors, and the material handles width, color, and other effects. This approach works in all modern browsers and supports advanced features like dashes and transparency.

When to Use MeshLine

Use fat lines when you need:

• Outlines, paths, or polylines with variable thickness
• Technical illustrations or stylized effects
• Color gradients or dashes along a line
• Interactive geometry that updates in real time
• Using as a viewer (not exporting as glTF)

For simple, single-pixel lines, the default three.js Line is still fastest, but for anything more advanced, MeshLine is the way to go.

Using with glTF files

When importing glTF files with embedded line geometries and materials, GLTFLoader2.UseMeshLines feature can be used to automatically convert those lines to MeshLine instances. This allows you to take advantage of the advanced line rendering capabilities without needing to modify the original GLTF files.

Checkout the article on GLTF Mesh Lines for more details on how to use this feature.