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.

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:

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 !