Separate shapes in one ExtrudeGeometry

Questions
, ,
1

Greetings.
I have code as follows:

var shape = new THREE.Shape();

shape.moveTo(0, 0);
shape.lineTo(1, 0);
shape.lineTo(1, 1);
shape.lineTo(0, 0); // Close the first triangle

shape.moveTo(2, 2);
shape.lineTo(2, 3);
shape.lineTo(3, 3);
shape.lineTo(2, 2); // Close the second triangle

var geometry = new THREE.ExtrudeGeometry(shape, {
    depth: 1,
    bevelEnabled: false
});

var material = new THREE.MeshBasicMaterial({color: 0x00ff00});

var mesh = new THREE.Mesh(geometry, material);

Result:
image

When I display it I get a weird object instead of two separate triangle extrudes. I understand that probably Shape is designed to be used for one object, but is this possible somehow to make it work like I want?

To put it more simply, I want a way to use Shape so that I can create separate closed shapes in one Extrude (so it seems they are different objects, but they are in the same geometry).

2

Extruding separate shapes then merging geometries works best.