Package Exports

three-wideline
three-wideline/dist/Wideline/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (three-wideline) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

tree-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.

Some details about the Wideline interface is under construction - stay tuned.

Todo

Support of three js shader lib
Documentation

Repository

Github: three-wideline

Example

How to draw the Wideline Logo as a three js line. Be ensure to add into your three js Canvas created by React Three Fiber. An running demo example from the repository is avaiable here Wideline example.

import { Wideline, generatePointsInterleaved } from "./Wideline"

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

Enjoy !