Non-simple/self-intersecting polygon troubles

Hello, I’m having some problem creating a non-simple polygon in 2D in three.js and could really use some help.
I have the points as x-y coordinates and when drawing the points with a self-closing line it’s looks as it should, but when using the same points to create a Shape, it is not rendered correctly. If the line/points aren’t self-closing (removing the last point) it also isn’t right.
The problem is probably because the polygon has self-intersecting lines - is there any way to solve this?

The black line is the line and the red area is the shape, which should have been within the self-closing line:


(Ignore the grid and position of the line and shape - the shape_points has been slightly edited for simplifying this post.)

Here’s the code:

var shape_points = [];
shape_points.push(new THREE.Vector2(8.75, 13.1));
shape_points.push(new THREE.Vector2(14.35, 14.25));
shape_points.push(new THREE.Vector2(4.35, 7.2));
shape_points.push(new THREE.Vector2(8.7, 3.5));
shape_points.push(new THREE.Vector2(18.95, 5.45));
shape_points.push(new THREE.Vector2(16.35, 12.2));
shape_points.push(new THREE.Vector2(8.75, 13.1));

var shape = new THREE.Shape(shape_points);
var shape_geometry = new THREE.ShapeBufferGeometry(shape);
var material = new THREE.MeshBasicMaterial({ color: 0xDE2640, opacity: 0.6 });
material.transparent = true;
this.Polygon = new THREE.Mesh(shape_geometry, material);
this.Polygon.position.z = 0;
this.Scene.add(this.Polygon);

var line_geo = new THREE.BufferGeometry().setFromPoints(shape_points);
var line = new THREE.Line(line_geo, new THREE.LineBasicMaterial({ color: 0x000000, linewidth: 2 }));
line.position.z = 0.01;
this.Scene.add(line);

Any help is really appreciated! Thanks in advance :slightly_smiling_face:

Live demo: https://jsfiddle.net/x9vy3zaf/

I suppose this happens because a triangulation is not possible with such degenerated input data (:poop: in :poop: out). You have to ensure to pass in a valid contour (without self-intersections) like in this live demo:

https://jsfiddle.net/x9vy3zaf/1/

2 Likes

Thanks for the answer/reply, it gives me something to continue with. I guess we’ll have to make our data non-:poop:-y :sweat_smile: