Esta questão está relacionada com istoquestão. oresponda mostra uma maneira muito legal de expulsar polígonos que possuem buracoso excelente exemplo ao vivo). O principal aprendizado da resposta foi que os caminhos em três.js (r58) não podem ter mais de um comando moveTo e precisam estar no início do caminho, o que significa que o caminho precisa ser quebrado por moveTos, de modo que moveTo start sempre um novo caminho.

A extrusão em three.js significa que os caminhos 2D são convertidos em formas 3D usando o possível chanfrado. É adequado para extrudar textos para criar letras e palavras em 3D, mas também pode ser usado para extrudar caminhos personalizados.

Agora surge duas questões:

como é possível lidar com polígonos que possuem múltiplos polígonos de orifícios e múltiplos polígonos não-orifícios?Como é possível adicionar uma textura à forma gerada como um todo?

Eu fiz um exemplo disso como SVG emhttp://jsbin.com/oqomuj/1/edit:

A imagem é produzida usando este caminho:

<path d="
 M57.11,271.77 L57.11,218.33 L41.99,218.63 L105.49,165.77 L138.41,193.18 L138.41,172.2 L152.53,172.2 L152.53,204.93 L168.99,218.63 L153.21,218.63 L153.21,271.77Z
 M74.14,264.13 L105.49,264.13 L105.49,232.8 L74.14,232.8Z
 M115.35,250.7 L135.96,250.7 L135.96,232.61 L115.35,232.61Z
 M56.11,145.77 L56.11,92.33 L40.99,92.63 L104.49,39.77 L137.41,67.18 L137.41,46.2 L151.53,46.2 L151.53,78.93 L152.53,79.76 L155.55,77.23 L159.5,74.52 L168.65,69.81 L176.46,66.93 L188.04,64.16 L200.63,62.7 L213.65,62.7 L226.05,64.09 L234.83,66.06 L245.65,69.73 L252.87,73.27 L259.12,77.34 L262.63,80.33 L265.6,83.47 L268.01,86.76 L269.83,90.17 L271.08,93.68 L271.76,99.08 L271.04,104.64 L269.75,108.2 L267.87,111.63 L265.42,114.91 L262.44,118.01 L258.95,120.92 L255.02,123.63 L245.86,128.34 L238.06,131.22 L226.48,133.99 L213.88,135.44 L200.63,135.44 L188.04,133.99 L176.46,131.22 L168.65,128.34 L159.5,123.63 L155.55,120.92 L152.21,118.12 L152.21,145.77Z
 M73.14,138.13 L104.49,138.13 L104.49,106.8 L73.14,106.8Z
 M114.35,124.7 L134.96,124.7 L134.96,106.61 L114.35,106.61Z
 M207.26,117.33 L210.57,117.26 L216.87,116.53 L222.66,115.15 L227.8,113.18 L233.11,110 L236.34,106.99 L238.51,103.64 L239.42,100.48 L239.42,97.67 L238.51,94.51 L236.34,91.16 L233.11,88.15 L227.8,84.97 L222.66,83 L216.87,81.62 L210.57,80.89 L203.94,80.89 L197.65,81.62 L191.86,83 L186.71,84.97 L181.41,88.15 L178.18,91.16 L176.01,94.51 L175.1,97.67 L175.1,100.48 L176.01,103.64 L178.18,106.99 L181.41,110 L186.71,113.18 L191.86,115.15 L197.65,116.53 L203.94,117.26Z
"></path>

e esse caminho convertido em matrizes individuais de vértices:

var lower_house_material = [{x:57.11,y:271.77},{x:57.11,y:218.33},{x:41.99,y:218.63},{x:105.49,y:165.77},{x:138.42,y:193.18},{x:138.42,y:172.2},{x:152.53,y:172.2},{x:152.53,y:204.93},{x:168.99,y:218.63},{x:153.21,y:218.63},{x:153.21,y:271.77}];
var lower_house_hole_1 = [{x:74.14,y:264.13},{x:105.49,y:264.13},{x:105.49,y:232.8},{x:74.14,y:232.8}];
var lower_house_hole_2 = [{x:115.35,y:250.7},{x:135.96,y:250.7},{x:135.96,y:232.61},{x:115.35,y:232.61}];

var upper_house_material = [{x:56.11,y:145.77},{x:56.11,y:92.33},{x:40.99,y:92.63},{x:104.49,y:39.77},{x:137.42,y:67.18},{x:137.42,y:46.2},{x:151.53,y:46.2},{x:151.53,y:78.93},{x:152.53,y:79.76},{x:155.55,y:77.23},{x:159.5,y:74.52},{x:168.65,y:69.81},{x:176.46,y:66.93},{x:188.04,y:64.16},{x:200.63,y:62.7},{x:213.65,y:62.7},{x:226.05,y:64.1},{x:234.83,y:66.06},{x:245.65,y:69.73},{x:252.87,y:73.27},{x:259.12,y:77.35},{x:262.63,y:80.33},{x:265.6,y:83.47},{x:268.01,y:86.76},{x:269.84,y:90.17},{x:271.08,y:93.68},{x:271.76,y:99.08},{x:271.04,y:104.64},{x:269.75,y:108.2},{x:267.87,y:111.63},{x:265.42,y:114.91},{x:262.44,y:118.01},{x:258.96,y:120.92},{x:255.02,y:123.63},{x:245.86,y:128.34},{x:238.06,y:131.22},{x:226.48,y:133.99},{x:213.88,y:135.45},{x:200.63,y:135.45},{x:188.04,y:133.99},{x:176.46,y:131.22},{x:168.65,y:128.34},{x:159.5,y:123.63},{x:155.55,y:120.92},{x:152.21,y:118.12},{x:152.21,y:145.77}];
var upper_house_hole_1 = [{x:73.14,y:138.13},{x:104.49,y:138.13},{x:104.49,y:106.8},{x:73.14,y:106.8}];
var upper_house_hole_2 = [{x:114.35,y:124.7},{x:134.96,y:124.7},{x:134.96,y:106.61},{x:114.35,y:106.61}];
var upper_house_hole_3 = [{x:207.26,y:117.33},{x:210.57,y:117.26},{x:216.87,y:116.53},{x:222.66,y:115.15},{x:227.8,y:113.18},{x:233.11,y:110},{x:236.34,y:106.99},{x:238.51,y:103.64},{x:239.42,y:100.48},{x:239.42,y:97.67},{x:238.51,y:94.51},{x:236.34,y:91.16},{x:233.11,y:88.15},{x:227.8,y:84.97},{x:222.66,y:83},{x:216.87,y:81.62},{x:210.57,y:80.89},{x:203.94,y:80.89},{x:197.65,y:81.62},{x:191.86,y:83},{x:186.71,y:84.97},{x:181.41,y:88.15},{x:178.18,y:91.16},{x:176.01,y:94.51},{x:175.1,y:97.67},{x:175.1,y:100.48},{x:176.01,y:103.64},{x:178.18,y:106.99},{x:181.41,y:110},{x:186.71,y:113.18},{x:191.86,y:115.15},{x:197.65,y:116.53},{x:203.94,y:117.26}];

A questão é como essa estrutura semelhante pode ser convertida para o objeto 3D em three.js para que possa ser extrudado usandoTHREE.ExtrudeGeometry( shape, extrusionSettings ) e depois disso texturizado como um todo?

Eu posso examinar os dados do caminho para saber qual buraco pertence ao polígono e lidar com todos como formas separadas, mas porque eu quero usaruma imagem de textura em todas as formas, Eu acho que a maneira preferida é lidar com todos os polígonos de material como uma forma, e polígonos de buraco como outra forma e usar algo como:

var shape = [lower_house_material, upper_house_material];
shape.holes = [lower_house_hole_1, lower_house_hole_2, upper_house_hole_1, upper_house_hole_2, upper_house_hole_3];
var 3d_geometry = THREE.ExtrudeGeometry( shape, extrusionSettings );

Então o3d_geometry deve estar no final uma malha para a qual eu possa acrescentar uma textura dessa maneira:

var textureFront = new THREE.ImageUtils.loadTexture( 'textureFront.png');
var textureSide = new THREE.ImageUtils.loadTexture( 'textureSide.png');
var materialFront = new THREE.MeshBasicMaterial( { map: textureFront } );
var materialSide = new THREE.MeshBasicMaterial( { map: textureSide } );
var materialArray = [ materialFront, materialSide ];
var faceMaterial = new THREE.MeshFaceMaterial(materialArray);
var final_mesh = new THREE.Mesh(3d_geometry, faceMaterial );

E uma das texturas poderia ser algo assim (256x256px):

E textura aplicada:

E como a malha é extrudada, há também a espessura 3D acima, mas você teve a ideia de texturizar.

Eu sei que as coordenadas y precisam ser invertidas, mas é uma tarefa trivial e não é o ponto da minha pergunta, mas se o three.js tiver função pronta para recortar y, seria útil.

Eu passei horas para examinar o código-fonte de três.js, exemplos edocumentação, mas porque a palavra mais frequente é "todo", não pode ajudar muito. E eu sou muito novato em three.js, eu acho que isso pode ser uma tarefa trivial para alguns usuários experientes do three.js.

ATUALIZAÇÃO: E só para ter certeza, os polígonos dos buracos são sempre bem comportados, o que significa que os polígonos dos buracos estão sempre dentro dos polígonos dos materiais e não há vértices duplicados ou auto-intersecções em polígonos de materiais ou polígonos de buracos e todos polígonos materiais têm ordem de enrolamento CW e furos CCW.

ATUALIZAÇÃO: Mesclar geometrias não era uma solução para texturizar todo o polígono extrudado definido por uma textura:http://jsfiddle.net/C5dga. A textura é repetida em todas as formas individuais, portanto, mesclar geometrias nesse caso não tem significado real. A solução poderia ser encontrada na fusão de formas antes de serem extrudadas, mas ainda não encontrou solução para isso.