P
P
Pavel K2016-09-19 13:51:20
3D
Pavel K, 2016-09-19 13:51:20

Three.js selectively ignores holes in ExtrudeGeometry, what should I do?

Greetings!
I'm experimenting with Three.js, extruding a shape along the paths:
(here is only a part, the main figure is a hole that is on the screen and which is not)

path.moveTo(193.927, 1036.45);
path.bezierCurveTo(206.093, 1034.95, 218.062, 1038.49, 218.062, 1038.49);
path.bezierCurveTo(226.729, 1027.82, 245.01, 1032.3, 248.396, 1043.99);
path.bezierCurveTo(251.896, 1056.07, 243.729, 1062.16, 243.729, 1062.16);
path.bezierCurveTo(252.396, 1086.99, 230.729, 1103.66, 230.729, 1103.66);
path.bezierCurveTo(230.729, 1103.66, 243.562, 1110.32, 250.229, 1125.66);
path.bezierCurveTo(250.229, 1125.66, 258.396, 1122.82, 264.229, 1133.66);
path.bezierCurveTo(270.062, 1144.49, 264.562, 1153.49, 260.562, 1154.16);
path.bezierCurveTo(256.562, 1154.82, 255.062, 1154.16, 255.062, 1154.16);
path.bezierCurveTo(255.062, 1154.16, 255.146, 1159.95, 253.771, 1164.7);
path.bezierCurveTo(253.771, 1164.7, 262.771, 1164.32, 267.771, 1173.82);
path.bezierCurveTo(272.771, 1183.32, 266.771, 1196.32, 259.271, 1201.32);
path.bezierCurveTo(251.771, 1206.32, 236.521, 1206.57, 232.271, 1193.07);
path.bezierCurveTo(232.271, 1193.07, 223.396, 1201.32, 205.271, 1202.82);
path.bezierCurveTo(205.271, 1202.82, 182.729, 1205.49, 163.562, 1188.49);
path.bezierCurveTo(163.562, 1188.49, 161.021, 1199.32, 150.021, 1200.32);
path.bezierCurveTo(139.021, 1201.32, 128.396, 1188.45, 127.646, 1176.2);
path.bezierCurveTo(126.896, 1163.95, 138.771, 1157.7, 147.271, 1161.82);
path.bezierCurveTo(147.271, 1161.82, 145.771, 1157.32, 145.333, 1149.32);
path.bezierCurveTo(145.333, 1149.32, 137.458, 1148.7, 135.896, 1141.39);
path.bezierCurveTo(134.333, 1134.07, 137.458, 1125.14, 143.771, 1121.95);
path.bezierCurveTo(150.083, 1118.76, 153.396, 1122.01, 153.396, 1122.01);
path.bezierCurveTo(153.396, 1122.01, 157.021, 1114.45, 164.646, 1108.2);
path.bezierCurveTo(164.646, 1108.2, 147.312, 1095.57, 149.729, 1074.41);
path.bezierCurveTo(149.729, 1074.41, 140.312, 1066.99, 141.479, 1056.07);
path.bezierCurveTo(142.646, 1045.16, 157.312, 1035.57, 170.229, 1045.07);
path.bezierCurveTo(170.229, 1045.07, 181.062, 1038.04, 193.927, 1036.45);
//-- есть:
path.moveTo(142.479, 1187.91);
path.bezierCurveTo(144.176, 1191.78, 148.319, 1193.71, 151.734, 1192.21);
path.bezierCurveTo(155.148, 1190.72, 156.541, 1186.37, 154.845, 1182.49);
path.bezierCurveTo(153.148, 1178.62, 149.005, 1176.69, 145.59, 1178.19);
path.bezierCurveTo(142.176, 1179.68, 140.783, 1184.04, 142.479, 1187.91);
//-- нету
path.moveTo(255.906, 1193.35);
path.bezierCurveTo(253.995, 1197.12, 249.75, 1198.82, 246.424, 1197.13);
path.bezierCurveTo(243.099, 1195.45, 241.952, 1191.02, 243.863, 1187.25);
path.bezierCurveTo(245.775, 1183.48, 250.02, 1181.79, 253.345, 1183.47);
path.bezierCurveTo(256.671, 1185.16, 257.817, 1189.58, 255.906, 1193.35);

The code itself:
simpleShapes = path.toShapes(true);
len1 = simpleShapes.length;
for (j = 0; j < len1; ++j) {
   simpleShape = simpleShapes[j];
   shape3d = new THREE.ExtrudeGeometry(simpleShape, {
      amount: 5,
      bevelEnabled: false
   });		
   
   mesh = THREE.SceneUtils.createMultiMaterialObject(shape3d, [material]);
   mesh.rotation.x = Math.PI;
   mesh.translateX( - 198.611);
   mesh.translateY( - 1118.460);
   group.add(mesh); 
}

The screen itself:
b1c954325bef4d66a2637513cf636563.jpg
There are no errors in the console. If you squeeze out these holes separately, then everything is there.
What am I doing wrong?
PS I know that there is a separate method for adding holes to a shape, but it doesn't work - you have to manually sort through all the shapes and look at the nesting, which, I think, is insanely long.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
P
Pavel K, 2016-09-19
@PavelK

In general, judging by the sources, three.js (starting with toShapes: function ( isCCW, noHoles ) { )
the author did not bother with the hierarchy of contours, and did it simply - if the contour is in the contour and the direction is counterclockwise, then a hole, otherwise a new figure.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question