How do i correctly set a hole inside a shape in Threejs from an array of Vector3s?

Question

I want to make a shape with a hole in Aframe. Given are the points of the outline of the hole as Vector3s. I can't figure out how to do it correctly.

This is what i tried:

I thought the code should look something like this:

...
    var shape = new THREE.Shape(points);
    shape.holes.push(holepoints);
    var shapeGeom = new THREE.ShapeGeometry(shape);
    var mesh = new THREE.Mesh(shapeGeom, new THREE.MeshBasicMaterial({
      color: "#faaffa",
      side: THREE.DoubleSide,
      wireframe: false
    }));
    mesh.geometry.vertices = xyzpoints;
    scene.object3D.add(mesh);

Unfortunatelly there is no error and the hole doesn't show. Thanks for any help!

Answer 1

This is a workaround hack, not a proper solution, but it might work. Make the interior shape connected to the exterior shape, so that it is all just one shape, and the 'canal' between the interior and exterior shapes has a width of 0.