Makio MeshLine

Appearance

Getting Started ​

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

THREE.Line1 device pixel · GPU line primitivemakio-meshlinetriangle strip · real projected thickness · styleable

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:

bash
pnpm add makio-meshline # or npm/yarn

Upgrading from V1

Version 2 is the current package line. Existing users should review Migrating from v1 to V2 before upgrading.

Basic Setup ​

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

javascript
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, 0.1, 1000 )
camera.position.z = 20

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

const line = new MeshLine()
	.lines( circlePositions( 64, 10 ), true ) // 64-segment closed circle, radius 10
	.lineWidth( 1 )                           // scene-space width with sizeAttenuation enabled
	.color( 0xff8800 )                        // base color
	.gradientColor( 0xffffff )                // gradient to white along arc length
	.autoResize()                             // keep screen resolution synced on window resize

scene.add( line )

renderer.setAnimationLoop( () => renderer.render( scene, camera ) )

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:

Next Steps ​