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

Question

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

SVG 中的形状是这样表示的 (http://jsbin.com/osoxev/1/edit)：

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

three.js 似乎不明白 moveto 是什么意思。它应该使“笔起来”并且在前一点和 moveto 命令点之间不画任何东西。但是“笔不上去”，形状就断了。

代码部分是这样的（不要混淆变量名，它们来自其他示例）：

// 创建字形形状（抱歉名称混淆）： var starPoints2 = new THREE.Shape(); // 添加第一个多边形 starPoints2.moveTo(307.94,275.49); starPoints2.lineTo(296.26,275.23); // ..... starPoints2.lineTo(286.64,272.99); starPoints2.lineTo(307.94,275.49); // 添加第二个多边形 starPoints2.moveTo(245.79,125.33); starPoints2.lineTo(232.93,124.53); // ..... starPoints2.lineTo(257.68,123.93); starPoints2.lineTo(245.79,125.33); // 为孔创建路径 var smileyEye1Path = new THREE.Path(); // 第一个洞 笑脸1Path.moveTo(221.69,258.13); 笑脸1Path.lineTo(215.2,255.08); // ..... 笑脸1Path.lineTo(230.57,259.43); 笑脸1Path.lineTo(221.69,258.13); //第二个洞 笑脸1Path.moveTo(238.44,116.65); 笑脸1Path.lineTo(231.99,114.29); // ..... 笑脸1Path.lineTo(246.81,116.94); 笑脸1Path.lineTo(238.44,116.65); // 为形状添加孔 var starShape = starPoints2; starShape.holes.push(smileyEye1Path); // 之后拉伸。在此处查看完整代码： // http://jsfiddle.net/pHn2B/33/

function(){} http://jsfiddle.net/pHn2B/33/

我在我的代码中做错了什么还是在 three.js 中有错误？

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

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