Getting Started

This guide will walk you through the basics of installing and using Makio MeshLine in your Three.js project.

A MeshLine is not a native GPU line — it's a triangle-strip ribbon that mirrors your polyline on both sides, so every line has real projected thickness, supports gradients, dashes, textures, and plugs into any TSL shader hook.

Installation

First, install the package:

pnpm add makio-meshline # or npm/yarn

Basic Setup

Here's a minimal example of how to create a simple circular MeshLine and add it to your scene:

import * as THREE from 'three/webgpu'
import { MeshLine, circlePositions } from 'makio-meshline'

const scene    = new THREE.Scene()
const camera   = new THREE.PerspectiveCamera(55, innerWidth / innerHeight, .1, 1000)
camera.position.z = 20

const renderer = new THREE.WebGPURenderer({ antialias: true })
renderer.setSize(innerWidth, innerHeight)
document.body.append(renderer.domElement)


const line = new MeshLine()
  .lines(circlePositions(64, 10))// 64-segment circle, radius 10
  .closed(true) // we close the loop ( last 2 point are connected )
  .lineWidth(1) // scene-space width with sizeAttenuation enabled
  .color(0xff8800) // color 
  .gradientColor(0xffffff) // with a gradient to white

scene.add(line)

const loop = () => {
  renderer.render(scene, camera)
  requestAnimationFrame(loop)
}
loop()

That's it! You should now see a vibrant orange circle in your scene.

Using a Framework?

If you're building with React or Vue, jump to a ready-to-run example with a declarative <MeshLine> wrapper component:

• React Three Fiber — open the R3F StackBlitz template
• Vue — open the Vue StackBlitz template

Next Steps

• Start with Basic Examples to see one option change at a time
• Check Follow and Draw Lines for dynamic updates
• Use the Sandbox to tune parameters and copy the generated line
• Move to Instancing and GPU Circle once the basics are clear
• Check other examples in the Live Demos to see the more advanced scenes in action
• Check out the API Reference to explore all the available customization options.