Native JavaScript implementation of Clipper2 for Union, Intersection and Difference operations on threejs shapes

Clipper2 provides Union, Intersection and Difference clipping operations for shapes. Threejs shape points can be passed to Clipper2 and the resulting clipped shape can be added back into threejs. See the following example

Source code on Github clipper2-js


It’s good. It works with shapes with curves. I doubted at first, so I had to try:

1 Like

Awesome stuff! Great to have something like this available in JS now.

A couple comments on the package and repo -

  • It would be great to link to the npm package page from the Github README so it’s easier to find.
  • It would also be good to include the license in the npm package.json so it shows up on the package page. Right now it just displays “no license” making it unclear that it’s the permissive BSL.
  • The image in the README is broken because it’s not included in the package files.
  • It would be nice to include a small snippet of code necessary to create a simple union or intersect shape or something. It’s not super clear from the existing c# documentation at the moment. Here’s what I gleaned as a minimal example when trying the package out:
// multiple points array by 1e6 since clipper
// requires integers for clipping

const path1 = new Path64();
path1.push( Clipper.makePath( [ ... ] ) );

const path2 = new Path64();
path2.push( Clipper.makePath( [ ... ] ) );

const finalPath = Clipper.Union( overallPath, path, FillRule.NonZero );

// divide final path by 1e6 to transform
// back to original scale after clipping

Again, great work!