將帶有孔的SVG路徑轉換爲three.js中的擠壓形狀

Question

我有一個由4個多邊形組成的形狀：2個無孔和2個孔。這只是一個例子。實際上，可以有一個由50個多邊形組成的形狀，其中20個是非孔，30個是孔。在SVG路徑中，通過將moveto：s和lineto：s組合可以很容易地表示這個多邊形。路徑字符串中的每個子多邊形（孔或非孔）以moveto命令開始，以z（end）命令結束，無孔的順序爲CW和孔爲CCW。非常簡單直觀。

在SVG形狀被表示這種方式（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"/> 

當嘗試遵循three.js所相同的邏輯，我遇到問題。下面是一個這樣的形象：

的three.js所似乎並不明白MOVETO手段。它應該讓「筆」在先前的點和移動到命令之間畫什麼。但「筆不上去」，形狀中斷。

的代碼部分是這樣的（不要混淆變量名，他們是來自其他的例子）：

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

我在做什麼錯在我的代碼或three.js有bug嗎？

Answer 1

在形狀定義的中間不能有moveTo。你必須有兩個獨立的形狀。你可以做這樣的事情：

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); 

小提琴：http://jsfiddle.net/pHn2B/34/

three.js所r.58

附：友情提示：將來，讓人們輕鬆地幫助你 - 編輯你的變量名並從你的例子中刪除不相關的代碼是一個好主意。