Converting SVG paths with holes to extruded shapes in three.js -

i have shape consists of 4 polygons: 2 non-holes , 2 holes. example. in reality there can shape consists of 50 polygons, of 20 non-holes , 30 holes. in svg path polygon can represented combining moveto:s , lineto:s. every sub-polygon (hole or non-hole) in path string starts moveto-command , ends z (end) command , non-holes have winding order cw , holes ccw. easy , intuitive.

the shape in svg represented way (http://jsbin.com/osoxev/1/edit):

 <path d="m305.08,241.97 l306,251.51 l308.18,256.39 l311.72,259.09 l317.31,260.01 l324.71,259.01 l332.45,255.86 l335.57,257.53 l337.6,260.44 l336.94,262.33 l328.27,268.74 l317.89,273.41 l307.94,275.49 l296.26,275.23 l286.64,272.99 l279.78,269.31 l274.14,263.55 l271.65,260.21 l269.2,261.06 l254.83,268.51 l242.11,272.97 l227.59,275.23 l209.91,275.48 l197.47,273.63 l187.91,270.13 l180.48,265.09 l175.32,258.88 l172.2,251.44 l171.1,242.23 l172.24,233.63 l175.49,226.24 l181,219.54 l189.42,213.3 l201.36,207.73 l217.23,203.25 l238.28,200.1 l265.24,198.78 l269.37,198.47 l269.98,182.93 l268.74,171.32 l266.05,163.7 l261.58,157.72 l255.24,153.24 l247.06,150.32 l235.44,149.13 l224.71,150.05 l215.91,153 l210.23,156.86 l207.64,160.85 l207.19,165.28 l209.34,169.86 l212.01,174.15 l212.14,177.99 l209.8,181.78 l204.22,185.79 l197.62,187.68 l188.65,187.43 l182.41,185.39 l178.45,181.77 l176.2,176.9 l176.03,170.64 l178.2,164.13 l183.09,157.69 l191.04,151.36 l202.01,145.82 l216.09,141.57 l232.08,139.24 l250.07,139.18 l266.13,141.23 l279.05,145.06 l289.15,150.3 l295.91,156.19 l300.73,163.41 l303.85,172.47 l305.07,183.78 l305.07,241.97 l305.08,241.97z   m243.99,64.95 l255.92,66.06 l266.21,69.28 l274.98,74.44 l280.64,80.19 l284.02,86.85 l285.26,94.52 l284.27,102.84 l281.24,109.66 l276.03,115.43 l267.89,120.46 l257.68,123.93 l245.79,125.33 l232.93,124.53 l222.21,121.74 l213.14,117.11 l207.36,111.92 l203.7,105.75 l201.94,98.18 l202.34,90.12 l204.86,83.4 l210.01,76.81 l217.49,71.33 l227.17,67.31 l238.35,65.2 l243.75,64.95 l243.99,64.95z  m269.99,212.88 l269.48,208.76 l266.59,208.36 l245.76,210.86 l230.95,214.67 l220.9,219.34 l213.82,224.85 l209.69,230.71 l207.92,237.03 l208.4,244.49 l210.86,250.57 l215.2,255.08 l221.69,258.13 l230.57,259.43 l242.52,258.58 l255.27,255.23 l266.07,250.04 l269.34,247.02 l269.99,244.81 l269.99,212.88 l269.99,212.88z  m243.63,73.34 l235.93,74.4 l230.07,77.36 l225.65,82.21 l223.05,88.57 l222.41,96.92 l223.94,104.53 l227.23,110.22 l231.99,114.29 l238.44,116.65 l246.81,116.94 l253.73,115.1 l258.87,111.5 l262.63,106.12 l264.64,98.93 l264.59,90.25 l262.47,83.41 l258.65,78.43 l253.37,75.08 l246.08,73.43 l243.68,73.34 l243.63,73.34z"/> 

when try follow same logic in three.js, run problems. below image of this:

the three.js doesn't seem understand moveto means. should make "pen up" , draw nothing between previous point , point of moveto command. "pen doesnt go up" , shape breaks.

the code portion (don't confuse of variable names, other example):

 // create glyph shape (sorry confusing name): var starpoints2 = new three.shape();  // add first polygon starpoints2.moveto(307.94,275.49); starpoints2.lineto(296.26,275.23); // ..... starpoints2.lineto(286.64,272.99); starpoints2.lineto(307.94,275.49);  // add second polygon starpoints2.moveto(245.79,125.33); starpoints2.lineto(232.93,124.53); // ..... starpoints2.lineto(257.68,123.93); starpoints2.lineto(245.79,125.33);  // create path holes var smileyeye1path = new three.path();  // first hole smileyeye1path.moveto(221.69,258.13); smileyeye1path.lineto(215.2,255.08); // ..... smileyeye1path.lineto(230.57,259.43); smileyeye1path.lineto(221.69,258.13);  // second hole smileyeye1path.moveto(238.44,116.65); smileyeye1path.lineto(231.99,114.29); // ..... smileyeye1path.lineto(246.81,116.94); smileyeye1path.lineto(238.44,116.65);  // add holes shape var starshape = starpoints2; starshape.holes.push( smileyeye1path );  // extrude after that. see full code here: // http://jsfiddle.net/phn2b/33/ 

function(){} http://jsfiddle.net/phn2b/33/

what i'm doing wrong in code or there bug in three.js?

you can't have moveto in middle of shape definition. have have 2 separate shapes. can this:

var object = new three.object3d();  var shape1 = new three.shape(); var shape2 = new three.shape();  var hole1 = new three.path(); var hole2 = new three.path();  shape1.holes.push( hole1 ); shape2.holes.push( hole2 );  . . .  object.add( mesh1 ); object.add( mesh2 );  scene.add( object ); 

fiddle: http://jsfiddle.net/phn2b/34/

three.js r.58

p.s. friendly tip: in future, idea make easy people -- edit variable names , remove unrelated code example.