three-wideline

A three js line implementation.

Install

npm install three-wideline -S

Documentation

The basic idea is very well documented here Instanced Line Rendering Part I and here Instanced Line Rendering Part II.

This implementation get this idea and provide a class to use together with three js. Most of the shader are reused here with small adjustments.

API Reference

Todo

• raycast
• check/adjust uv mapping
• multiple lines with one attribute set

Repository

Github: three-wideline

Example

An running demo example from the repository is avaiable here Wideline example.

Samples at codesandbox:

• logo
• animated

How to draw the Wideline Logo as a three js line using typescript and react.

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

function Logo() {
   return (
      <Wideline
         scale={[5, 5, 1]}
         points={[-0.5, 0.5, -0.25, -0.5, 0, 0.5, 0.25, -0.5, 0.5, 0.5]}
         attr={[
            { color: "black", width: 0.25 },
            { color: "yellow", width: 0.2 },
            { color: "red", width: 0.15 },
         ]}
         join={"Round"}
         capsStart={"Round"}
         capsEnd={"Top"}
      />
   )
}

ReactDOM.render(
   <Canvas style={{ backgroundColor: "grey", height: "400px" }}>
      <ambientLight intensity={0.75} />
      <Logo />
   </Canvas>,
   document.getElementById('root'),
)

Enjoy !