Konwersja ścieżek SVG z otworami do wyciśniętych kształtów w pliku three.js

Question

Mam kształt składający się z 4 wielokątów: 2 bez otworów i 2 otwory. To tylko przykład. W rzeczywistości może istnieć kształt złożony z 50 wielokątów, z których 20 nie jest dziurami, a 30 jest dziurami. W ścieżce SVG ten wielokąt można łatwo przedstawić, łącząc moveto: s i lineto: s. Każdy sub-wielokąt (otwór lub inny niż otwór) w ścieżce ścieżki zaczyna się od komendy moveto i kończy się komendą z (koniec), a nie-otwory mają kolejność nawijania CW i otwory CCW. Bardzo łatwy i intuicyjny.

Kształt SVG jest reprezentowana w ten sposób (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"/> 

Kiedy staram się postępować zgodnie z tą samą logiką w three.js, biegnę do problemów. Poniżej znajduje się obraz to:

W Three.js nie wydaje się zrozumieć, co MoveTo środków. Powinien wykonać "pen up" i nie wyciągać nic pomiędzy poprzednim punktem a punktem polecenia moveto. Ale "pióro nie idzie w górę", a kształt pęka.

Część kodu jest to (nie mylić z nazwami zmiennych, są one z innego przykładu):

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

Co robię źle w moim kodu lub jest tam błąd w three.js?

Answer 1

Nie możesz mieć moveTo w środku definicji kształtu. Musisz mieć dwa oddzielne kształty. Można zrobić coś takiego:

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

PS: Przyjazna wskazówka: w przyszłości dobrze byłoby ułatwić ludziom pomoc - edytuj nazwy zmiennych i usuń niepowiązany kod z przykładu.