तीन.जेएस

Question

में छिद्रित आकारों के छेद के साथ एसवीजी पथ को परिवर्तित करना मेरे पास एक आकार है जिसमें 4 बहुभुज होते हैं: 2 गैर-छेद और 2 छेद। यह केवल एक उदाहरण है। हकीकत में एक आकार हो सकता है जिसमें 50 बहुभुज होते हैं, जिनमें से 20 गैर-छेद होते हैं और 30 छेद होते हैं। एसवीजी पथ में पॉलीगॉन की तरह यह आसानी से moveto: s और lineto संयोजन द्वारा प्रदर्शित किया जा सकता है: एस। पथ स्ट्रिंग में प्रत्येक उप-बहुभुज (छेद या गैर छेद) moveto-command के साथ शुरू होता है और जेड (एंड) कमांड के साथ समाप्त होता है और गैर-छेदों में घुमावदार क्रम सीडब्ल्यू और छेद सीसीडब्ल्यू होता है। बहुत आसान और सहज ज्ञान युक्त।

 
<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 में एक ही तर्क पालन करने की कोशिश, मैं समस्याओं में चलाने:

एसवीजी में आकार इस तरह से (http://jsbin.com/osoxev/1/edit) प्रतिनिधित्व किया है। नीचे इस की एक छवि है:

Three.js को समझने के लिए क्या मतलब है moveto प्रतीत नहीं होता। इसे "पेन अप" बनाना चाहिए और पिछले बिंदु और 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/

मुझे अपने कोड में गलत कर रहा हूँ या है तीन.जेएस में बग?

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

पी.एस. दोस्ताना युक्ति: भविष्य में, लोगों के लिए आपकी सहायता करना आसान बनाना एक अच्छा विचार होगा - अपने चर नामों को संपादित करें और अपने उदाहरण से असंबंधित कोड को हटा दें।