在three.js中将带孔的SVG路径转换为拉伸形状

我有一个由4个多边形组成的形状：2个非孔和2个孔。这只是一个例子。实际上，可以有一个由50个多边形组成的形状，其中20个是非孔，30个是孔。在SVG路径中，可以通过组合moveto:s和lineto:s来轻松表示类似的多边形。路径字符串中的每个子多边形（孔或非孔）以moveto命令开始，以z（end）命令结束，非孔具有顺时针缠绕顺序和逆时针缠绕顺序。非常简单和直观

SVG中的形状是这样表示的（）：

当我试图遵循three.js中的相同逻辑时，我遇到了问题。下面是这张图片：

three.js似乎不明白moveto的意思。它应该“画笔向上”，并且在上一点和moveto命令点之间不绘制任何内容。但是“笔不向上”和形状断裂

代码部分如下（不要混淆变量名，它们来自其他示例）：

//创建glyph形状（抱歉，名称混淆）： var starPoints2=new THREE.Shape（）； //添加第一个多边形 星点2.移动到（307.94275.49）； starPoints2.lineTo（296.26275.23）； // ..... starPoints2.lineTo（286.64272.99）； starPoints2.lineTo（307.94275.49）； //添加第二个多边形 星点2.移动到（245.79125.33）； starPoints2.lineTo（232.93124.53）； // ..... starPoints2.lineTo（257.68123.93）； starPoints2.lineTo（245.79125.33）； //创建孔的路径 var smileyey1path=new THREE.Path（）； //第一洞 微笑眼1路径移动到（221.69258.13）； smileyEye1Path.lineTo（215.2255.08）； // ..... Smileyeye1路径lineTo（230.57259.43）； Smileyeye1路径lineTo（221.69258.13）； //第二洞 微笑眼1路径移动到（238.44116.65）； Smileyeye1路径lineTo（231.99114.29）； // ..... Smileyey1Path.lineTo（246.81116.94）； smileyEye1Path.lineTo（238.44116.65）； //为形状添加孔 var starShape=starPoints2； 星形。孔。推（smileyEye1Path）； //然后挤出。请参见此处的完整代码： // http://jsfiddle.net/pHn2B/33/

function（）{}

---

我在代码中做了什么错误，还是在三中有错误？js？

< p>在形状定义的中间不能有<代码> MOVADS。你必须有两个不同的形状。您可以这样做：

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

小提琴：

3.js r.58

---

附言友好提示：在将来，让人们更容易地帮助您是一个好主意——编辑您的变量名并从示例中删除不相关的代码。

谢谢您的回答。它工作得很好！因为我不熟悉three.js，所以我很难处理多个带有多个孔的多边形，也很难使用一个纹理将它们作为一个整体进行纹理处理：。我非常感谢您的帮助，我想这个答案也能帮助其他有类似问题的人。 // 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/

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