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

Question

I have a shape that consists of 4 polygons: 2 non-holes and 2 holes. This is only an example. In reality there can be a shape that consists of 50 polygons, of which 20 are non-holes and 30 are holes. In SVG path this like polygon can be represented easily by combining moveto:s and lineto:s. Every sub-polygon (hole or non-hole) in path string starts with moveto-command and ends with z (end) command and non-holes have winding order CW and holes CCW. Very easy and intuitive.

The shape in SVG is represented this 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 I try to follow the same logic in three.js, I run into problems. Below is an image of this:

The three.js doesn't seem to understand what moveto means. It should make "pen up" and draw nothing between previous point and point of moveto command. But the "pen doesnt go up" and the shape breaks.

The code portion is this (don't confuse of variable names, they are from other example):

// Create glyph shape (sorry the 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 for 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 to shape
var starShape = starPoints2;
starShape.holes.push( smileyEye1Path );

// Extrude after that. See the full code here:
// http://jsfiddle.net/pHn2B/33/

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

What I'm doing wrong in my code or is there bug in three.js?

Answer 1

You can't have a moveTo in the middle of a shape definition. You have to have two separate shapes. You can do something like 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 the future, it would be a good idea to make it easy for people to help you -- edit your variable names and remove unrelated code from your example.