three-wideline

A powerful Three.js library for rendering wide lines with customizable attributes, joins, caps, and advanced features. Built for React Three Fiber, it provides an easy-to-use component for creating high-quality 2D lines in 3D space.

Features

• Customizable Attributes: Set color, width, and opacity per segment
• Line Joins: Choose from Round, Bevel, Miter, or custom joins
• Caps: Start and end caps with options like Butt, Round, Square, Top
• Transparency: Optimized shaders for transparent lines
• Custom Geometry: Beta support for user-defined custom elements
• Raycasting: Optional raycasting for interaction
• React Integration: Seamless integration with React Three Fiber
• TypeScript: Full TypeScript support with strict typing

Install

npm install three-wideline

Quick Start

import { Canvas } from "@react-three/fiber"
import { Wideline } from "three-wideline"

function MyLine() {
   return (
      <Wideline
         points={[-1, -1, 0, 1, 1, -1]}
         attr={{ color: "red", width: 0.2 }}
         join="Round"
         capsStart="Round"
         capsEnd="Square"
      />
   )
}

function App() {
   return (
      <Canvas>
         <MyLine />
      </Canvas>
   )
}

Documentation

The core concept is based on instanced line rendering, well-documented in:

• Instanced Line Rendering Part I
• Instanced Line Rendering Part II

This library adapts these ideas into a reusable Three.js component with enhanced features.

API Reference

Examples

Live demo: Wideline Example

CodeSandbox samples:

• Logo Example
• Animated Example

Repository

GitHub: three-wideline

Development

Prerequisites

• Node.js >= 18
• pnpm

Setup

pnpm install

Development Commands

# Start development server with samples
pnpm start

# Run tests
pnpm test

# Build for production
pnpm build

# Lint code
pnpm lint

# Format code
pnpm format

Recommended VS Code Extensions

This project includes recommended VS Code extensions in .vscode/extensions.json. Install them for the best development experience:

Core Development:

• TypeScript Importer - Auto import TypeScript modules
• Prettier - Code formatting
• ESLint - JavaScript/TypeScript linting

Testing:

• Vitest - Test explorer for Vitest

Three.js & React:

• Tailwind CSS IntelliSense - CSS framework support

Git & Productivity:

• Git Graph - Git history visualization
• Todo Tree - Todo comments explorer

File Support:

• YAML - YAML file support
• Markdownlint - Markdown linting

Theme & Icons:

• VS Code Icons - File icons
• One Dark Pro - Popular dark theme

Testing

This project uses Vitest for testing. Tests are located in src/**/*.test.tsx files.

# Run all tests
pnpm test

# Run tests in watch mode
pnpm test -- --watch

# Run specific test file
pnpm test src/Wideline/Wideline.test.tsx

Building

# Build samples for development
pnpm build

# Build library for distribution
pnpm dist

Architecture

• TypeScript/React with strict typing
• Three.js for 3D rendering
• Vite for fast development and building
• Vitest for testing
• ESLint + Prettier for code quality
• Husky for git hooks
• API Extractor for documentation generation