I am pretty new to Three.js, so please forgive me if I a missing something obvious here.

My problem setting is the following: I have a 2D shape (e.g. a rectangle) with some holes in it:

 const shape = new THREE.Shape();
 shape.moveTo(...);
 shape.lineTo(...);
 // ...

 const hole = new THREE.Shape();
 hole..moveTo(...);
 hole.lineTo(...);
 // ...

 shape.holes.push(new THREE.Path(hole.getPoints()));

I then extrude this shape into 3D as follows:

const height = ...;
const extrudeSettings = { depth: height };
const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);

This geometry is then rotated by some angle around some axis:

const quaternion = new THREE.Quaternion().setFromAxisAngle(angle, axis);
geometry.applyQuaternion(quaternion);

Finally, the geometry is rendered (using react-three-fiber):

<>
 <mesh geometry={geometry}>
    <meshBasicMaterial
        color={red}
        side={THREE.FrontSide}
     />
 </mesh>
</>

I would now like to fill the holes in this geometry with a (or several) different colors.

My approach until now was to create geometries for the holes by extruding the underlying 2D shape for each hole, applying the same rotation and then rendering them like the “main shape” above. However, I was never able to get them to line up with the holes in the original shape.

It is very likely that my math is just off. However, if anyone knows of a simpler path to achive this / has already done this, I’d be grateful for any insight you have.