THREE.js: Punch hole in Shape with another Shape

Question

I am using the D3-threeD2.js to translate SVG files into THREE.Shape(s) that I can then extrude with three.js. It works fine except for holes.

Lets say I have a donut shape: a disc with a hole inside. The library gives me one THREE.Shape that represents the disc and one THREE.Shape that represents the hole.

I know I can punch a hole in the disc if I have a THREE.Path, but I don't - I have a THREE.Shape.

So is there a way to get a THREE.Path from a THREE.Shape? Or alternatively is there a way to punch a hole in a THREE.Shape with another THREE.Shape?

Answer 1

I post here again, because I recently realized that the answer to this question is almost too simple to be true and worth mentioning separately.

---

THREE.Shape extends THREE.Path and you can simply use the THREE.Shape to punch a hole in another shape directly by adding it as a hole.

I tested it in two different ways. With shapes directly:

var shape = new THREE.Shape();
//...define your shape

var hole = new THREE.Shape();
//...define your hole

shape.holes.push( hole );
shape.extrude( extrusionSettings );

But if you make a path to shapes with the toShapes method it also works:

var path = new THREE.Path();
//...define your path
var shape = path.toShapes()[0];

var hole = new THREE.Shape();
//...define your hole
var holes = hole.toShapes();

shape.holes = holes;
shape.extrude( extrusionSettings );

See a fiddle here which demonstrates that both solutions work...