svg - 挤出具有多个孔的多个多边形并对组合形状进行纹理化

Question

此问题与此有关 question . answer展示了非常好的挤出有孔多边形的方法(参见 the excellent live example)。这个答案的主要学习是在three.js(r58)中的路径不能有多个moveTo命令并且它必须在路径的开头，这意味着路径必须被moveTos打破，这样moveTo start总是一条新路。

在three.js 中挤出意味着使用可能的斜角将2D 路径转换为3D 形状。它适用于挤压文本以制作 3D 字母和单词，但也可用于挤压自定义路径。

现在有两个问题:

如何处理具有多个孔多边形和多个非孔多边形的多边形？

如何将纹理添加到整个生成的形状？

我在 http://jsbin.com/oqomuj/1/edit 中做了一个 SVG 的例子:



图像是使用以下路径生成的:

<路径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,157.57.53.57.59.53.57.59.53.57.59 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.59.27 L234.83,66.59.73 L259.73 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 L18181.81.81.81.81.81.81.87 ,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,11916.516.Z.516.Z.
">

并将此路径转换为单个顶点数组:

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 :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. :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. :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} :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. :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}];

问题是，如何在three.js 中将这种类似的结构转换为3D 对象，以便可以使用 THREE.ExtrudeGeometry( shape, extrusionSettings ) 将其挤出。然后整体纹理化？

我可以检查路径数据以了解哪个孔属于哪个多边形并将所有作为单独的形状处理，但是因为我想在所有形状中使用一个纹理图像，我认为首选方法是将所有 Material 多边形作为一个形状处理, 和孔多边形作为其他形状并使用类似的东西:

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(形状，extrudeSettings)；

所以 3d_geometry最后应该是一个网格，我可以通过这种方式附加纹理:

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

其中一种纹理可能是这样的(256x256px):



和纹理应用:



并且因为网格是挤压的，所以上面也有 3D 厚度，但是你有了纹理的想法。

我知道必须翻转 y 坐标，但这是一项微不足道的任务，而不是我的问题的重点，但是如果 Three.js 具有用于裁剪 y 的现成功能，那将会很有帮助。

我花了几个小时来检查三个.js 源代码、示例和 documentation ，但因为出现频率最高的词是“todo”，所以帮不上什么忙。而且我是three.js 的新手，我认为这对于一些有经验的three.js 用户来说可能是微不足道的任务。

更新:为了确保，孔多边形始终表现良好，这意味着孔多边形始终完全位于 Material 多边形内，并且在 Material 多边形或孔多边形中没有重复的顶点或自相交以及所有 Material 多边形具有 CW 缠绕顺序和孔 CCW。

更新:合并几何图形不是对由一个纹理设置的整个挤出多边形进行纹理化的解决方案: http://jsfiddle.net/C5dga .纹理在所有单个形状上重复，因此在这种情况下合并几何图形没有实际意义。在挤压之前合并形状可能会找到解决方案，但还没有找到解决方案。

Answer 1

您可以按照以下代码段合并几何图形，从而只生成一个网格。从您之前的问题中，您已经知道如何对单个几何体进行纹理化。

var geometry1 = new THREE.ExtrudeGeometry( shape1, extrusionSettings );
var geometry2 = new THREE.ExtrudeGeometry( shape2, extrusionSettings );

geometry1.merge( geometry2 );

. . .

var mesh = new THREE.Mesh( geometry1, material );

scene.add( mesh );

fiddle : http://jsfiddle.net/pHn2B/88/

fiddle : http://jsfiddle.net/C5dga/13/ (有质感)

编辑:作为创建单独几何图形和使用 merge 的替代方法实用程序，您可以使用以下模式创建单个几何图形，而不是:

var geometry1 = new THREE.ExtrudeGeometry( [ shape1, shape2 ], extrusionSettings );

编辑:更新为three.js r.70