Conversione di tracciati SVG con fori su forme estruse in three.js

Question

Ho una forma composta da 4 poligoni: 2 non fori e 2 fori. Questo è solo un esempio. In realtà può esserci una forma composta da 50 poligoni, di cui 20 non fori e 30 fori. Nel percorso SVG questo poligono simile può essere rappresentato facilmente combinando moveto: s e lineto: s. Ogni sotto-poligono (foro o non-foro) nella stringa del percorso inizia con moveto-command e termina con il comando z (end) e i non-holes hanno ordine di avvolgimento in senso orario e fori in senso antiorario. Molto facile e intuitivo.

La forma in SVG è rappresentato in questo modo (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"/> 

Quando provo a seguire la stessa logica Three.js, corro in problemi. Qui di seguito è un'immagine di questo:

Le Three.js non sembra di capire che cosa moveTo mezzi. Dovrebbe fare "pen up" e disegnare nulla tra il punto precedente e il punto del comando di movimento. Ma la "penna non sale" e la forma si rompe.

La porzione di codice è questo (non confondere di nomi di variabili, sono da un altro esempio):

 
// 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/

quello che sto facendo di sbagliato nel mio codice o è ci bug in three.js?

Answer 1

Non è possibile avere un moveTo nel mezzo di una definizione di forma. Devi avere due forme separate. Si può fare qualcosa di simile:

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. Suggerimento: in futuro, sarebbe una buona idea rendere più semplice l'aiuto delle persone: modifica i nomi delle variabili e rimuovi il codice non correlato dal tuo esempio.