three.js : extrude with holes issue - three.js

Question

I try to make a shape with holes and to extrude it, but I got a strange result :
here is my code :
var shape = new THREE.Shape();
shape.moveTo(0,0);
var radius = 1;
shape.absarc(0,radius,radius,3/2*(Math.PI),1/2*(Math.PI), false);
shape.lineTo(6.34,ToolSize);
shape.absarc(6.34,radius,radius,1/2*(Math.PI),3/2*(Math.PI), false);
for (var i=0; i<3; i++) {
var hole = new THREE.Shape();
var centerX = 1.9+i*1.27;
hole.absarc(centerX,0.6,0.3,0,2*(Math.PI), false);
shape.holes.push(hole);
}
var extrudeSettings={amount: 2, bevelEnabled: false, material: 0, extrudeMaterial: 1, steps: 10};
var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
var material1 = new THREE.MeshStandardMaterial({color: 0x111111, roughness: 0.1, metalness: 0.4, side: THREE.DoubleSide});
var material2 = new THREE.MeshStandardMaterial({color: 0x8dbe8d, roughness: 0.7, metalness: 0, side: THREE.DoubleSide});
var materials = [
material1,
material2];
var mesh = THREE.SceneUtils.createMultiMaterialObject(geometry,materials);
Thank you for your help

Answer 1

The triangulation will work if you use earcut as the triangulation algorithm.
This change should be made permanent in future releases of three.js, but for now, follow the changes implemented in this three.js example.
The change involves adding the following code:
<!-- replace built-in triangulation with Earcut -->
<script src="js/libs/earcut.js"></script>
<script>
THREE.ShapeUtils.triangulateShape = function ( contour, holes ) {
function removeDupEndPts( points ) {
var l = points.length;
if ( l > 2 && points[ l - 1 ].equals( points[ 0 ] ) ) {
points.pop();
}
}
function addContour( vertices, contour ) {
for ( var i = 0; i < contour.length; i ++ ) {
vertices.push( contour[ i ].x );
vertices.push( contour[ i ].y );
}
}
removeDupEndPts( contour );
holes.forEach( removeDupEndPts );
var vertices = [];
addContour( vertices, contour );
var holeIndices = [];
var holeIndex = contour.length;
for ( i = 0; i < holes.length; i ++ ) {
holeIndices.push( holeIndex );
holeIndex += holes[ i ].length;
addContour( vertices, holes[ i ] );
}
var result = earcut( vertices, holeIndices, 2 );
var grouped = [];
for ( var i = 0; i < result.length; i += 3 ) {
grouped.push( result.slice( i, i + 3 ) );
}
return grouped;
};
</script>
three.js r.88