Extrude geometry, path holes bug

[nosy-b]

Hi,

I'm working on a simple modeler and I used ExtrudeGeometry on a shape containing some holes. It ususally works fine with one or two holes but it seems not very stable after. I tried to keep anti-clockwise order for hole vertices but still it doesn't work fine. Here is a very simple example that doesn't work, the triangulation is wrong:

var path = new THREE.Path();

path.moveTo( 0, 0 );
path.lineTo(80, 0);
path.lineTo( 80, -100);
path.lineTo( 0, -100);
path.lineTo( 0, 0);

path.moveTo( 30, -40 );
path.lineTo( 40, -40 );
path.lineTo( 40, -30 );
path.lineTo( 30, -30 );
path.lineTo( 30, -40 );

path.moveTo( 10, -20 );
path.lineTo( 20, -20 );
path.lineTo( 20, -10 );
path.lineTo( 10, -10 );
path.lineTo( 10, -20 );

path.moveTo( 25, -15 );
path.lineTo( 35, -15 );
path.lineTo( 35, -5 );
path.lineTo( 25, -5 );
path.lineTo( 25, -15 );

var shapes = path.toShapes();
var solid = new THREE.ExtrudeGeometry(shapes, { amount: height, bevelEnabled: false });
var mesh = new THREE.SceneUtils.createMultiMaterialObject(solid, [ new THREE.MeshBasicMaterial( { color: 0xff00ff } ));

scene.add(mesh);

If you have any idea it would save me because I really don't get it and I don't know any other way to do some simple building façade :)

[mrdoob]

@zz85 any ideas?

[zz85]

you have a case our current triangulation algorithm doesn't work very well with - a small parameter with many holes (in this case, only 4 points for the parameter). one way is to add more points to parameters, and certain times setting useSpacedPoints:true may help.

i've thought of rewriting the hole cutting algorithm or the entire triangulation algorithm again, but i've never gotten to it.

a more "stable" solution may be use another triangulation algorithm which works with three.js and this relies on tri2poly.js (mrdoob, perhaps we could add a flag to allow tri2poly.js algorithm?)

an working example is http://jsbin.com/obajov/edit#javascript,html,live

p.s. An alternative to building geometry procedurally is using csg. See http://chandler.prallfamily.com/2011/12/constructive-solid-geometry-with-three-js/ http://learningthreejs.com/blog/2011/12/10/constructive-solid-geometry-with-csg-js/

[nosy-b]

Thanks! I actually solved my problem creating my own façade triangulation class which was easy because I suppose façade are planars and windows and doors are parallel to each other. But I'm gonna try to do something more generic after.

[nicholaswmin]

@mrdoob Why was this closed? The erroneous algorithm still exists within Three

@zz85 Did you ever gotten around to figuring out the correct algorithm?

[zz85]

@nicholaswmin i haven't have the time to reimplement the triangulation algorithm. its possible to use poly2tri.js with three.js or you could attempt writing one too.