Package Exports

three-wideline
three-wideline/dist/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

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.

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

Todo

Support of three js shader lib
Documentation
Nested import path caused by repository folder structure

Repository

Github: three-wideline

Example

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

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

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

function Logo() {
   return (
      <Wideline
         scale={[5, 5, 0]}
         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>
      <Logo />
   </Canvas>,
   document.getElementById('root'),
)

Enjoy !