将带孔的SVG路径转换为three.js中的挤出形状

Converting SVG paths with holes to extruded shapes in three.js

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

SVG中的形状以这种方式表示(http://jsbin.com/osoxev/1/edit)：

1
2
3
4
5
6
7

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

enter image description here

3.js似乎不明白moveto的意思。它应该在上一个点和moveto命令点之间绘制"pen up"和"nothing"。但是"笔不上"，形状就断了。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

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

形状定义中间不能有moveTo。你必须有两个不同的形状。你可以这样做：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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/

J.R.58

P.S.友好提示：将来，最好让人们更容易帮助您——编辑变量名并从示例中删除不相关的代码。