# Triangulate problem in THREE.Shape with holes

##### Description of the problem

This form is for three.js bug reports and feature requests only.
This is NOT a help site. Do not ask help questions here.
If you need help, please use stackoverflow.

Describe the bug or feature request in detail.
A code snippet, screenshot, and small-test help us understand.

You can edit for small-test.
http://jsfiddle.net/akmcv7Lh/ (current revision)
http://jsfiddle.net/hw9rcLL8/ (dev)

• Dev
• r85
##### Browser
• All of them
• Chrome
• Firefox
• Internet Explorer
• All of them
• Windows
• macOS
• Linux
• Android
• iOS
##### Hardware Requirements (graphics card, VR Device, …)

A live example forked from http://jsfiddle.net/akmcv7Lh/ (Three.js offical small test, see the description above)
http://jsfiddle.net/liyuanqiu/akmcv7Lh/160/

I have a shape:

``````var shape = new THREE.Shape();
shape.moveTo(100, 400);
shape.lineTo(400, 400);
shape.lineTo(400, 100);
shape.lineTo(100, 100);
``````

Two holes in the shape:

``````var hole1 = new THREE.Path();
hole1.moveTo(200, 300);
hole1.lineTo(150, 200);
hole1.lineTo(300, 200);
shape.holes.push(hole1);

var hole2 = new THREE.Path();
hole2.moveTo(300, 200);
hole2.lineTo(250, 150);
hole2.lineTo(350, 150);
shape.holes.push(hole2);
``````

The two holes share one point (300, 200).

You can see a triangulation error, makes my holes wrong.

If I let hole2 start from (301, 200), it’ll be right.

Some one can help?

## 1 thought on “Triangulate problem in THREE.Shape with holes”

1. Anonymous says:

This is not a bug IMO.
Your holes are intersecting and that is why you get this “unexpected” result.
You can draw those two holes as one hole and it will work correctly:

http://jsfiddle.net/wilt/akmcv7Lh/162/

``````var shape = new THREE.Shape();
shape.moveTo(100, 400);
shape.lineTo(400, 400);
shape.lineTo(400, 100);
shape.lineTo(100, 100);
shape.lineTo(100, 400);

var hole = new THREE.Path();
hole.moveTo(200, 300);
hole.lineTo(150, 200);
hole.lineTo(300, 200);
hole.lineTo(250, 150);
hole.lineTo(350, 150);
hole.lineTo(200, 300);
shape.holes.push(hole);
``````

Refer to StackOverflow for such questions/issues.