Generate strip geometry for three.js. Supports taper, twist, dasharray and uvgen.
via cdn
https://cdn.jsdelivr.net/gh/ycw/three-strip@{VERSION}/build/three-strip.js
or npm
$ npm i ycw/three-strip
$ npm i ycw/three-strip#{VERSION_TAG}
import * as THREE from "three";
import { Strip, StripGeometry, StripHelper } from "three-strip";
const curve = new THREE.LineCurve3(..);
const radius = (i, I) => 1 - i / I; // taper
const tilt = (i, I) => i / I * Math.PI; // twist
const strip = new Strip(curve, radius, tilt);
const segments = 100;
const geom = new StripGeometry(strip, segments);
const mesh = new THREE.Mesh(geom, mat);
scene.add(mesh);
scene.add(new StripHelper(strip, segments));Strip
new (curve, radius?, tilt?);
// curve: 3d curve or curvepath
// radius: half breadth
// tilt: twist angle (in radian) around tangent.curve.radius.tilt.computeFrames(nSeg): Get r-handed coords frames.
StripGeometry ( extends BufferGeometry )
new (strip, nSeg, uvFn?);
new (strip, [nSeg, dashArray?, dashOffset?], uvFn?);
// nSeg: segment count ( +ve int )
// dashArray: dash-gap list ( +ve ints )
// dashOffset: dash offset ( int )
// uvFn: uvgen fn ( see UvPreset )Ex. dashed strip
new StripGeometry(strip, [10, [1, 2, 3]]);
// since dashArray has odd number of values, it's repeated
// to yield even number of values, i.e. [1,2,3,1,2,3]StripHelper ( extends LineSegments )
new (strip, segments, size?, xColor?, yColor?, zColor?);.strip.segments: segment count.size: axes length.xColor: x-axis color.yColor: y-axis color.zColor: z-axis color.update(): update helper
Ex. update helper props
const helper = new StripHelper(strip, 10);
helper.xColor.setClassName("purple");
helper.segments *= 2;
helper.update();UvPreset
UvPreset.dash; // arr of dash-space uv fns.
UvPreset.strip; // arr of strip-space uv fns.Ex.
new StripGeometry(strip, [100, [1, 2]], UvPreset.dash[0]);
new StripGeometry(strip, 100, UvPreset.strip[0]);