Posted in Uncategorized

Triangulate problem in THREE.Shape with holes

   January 6, 2021  1 Comment on 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)

Three.js version
  • Dev
  • r85
  • …
Browser
  • All of them
  • Chrome
  • Firefox
  • Internet Explorer
OS
  • 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?

Author: Fantashit

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

  1. 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.

Comments are closed.