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 
in 
-y 