svg - 在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 ):

<路径d =“M305.08,241.97 L306,251.51 L308.18,256.39 L311.72,259.09 L317.31,260.01 L324.71,259.01 L332.45,255.86 L335.57,257.53 L337.6,260.44 L336.94,262.33 L328.27,268.74 L317.89,273.41 L307.94,275.49 L296.26,275.23 L286.64,272.99 L279.78,269.31 L274.14,263.55 L271.65,260.21 L269.2,261.06 L254.83,268.51 L242.11,272.97 L227.59,275.23 L209.91,275.48 L197.47,273.63 L187.91,270.13 L180.48,265.09 L175.32,258.88 L172.2,251.44 L171.1,242.23 L172.24,233.63 L175.49,226.24 L181， 219.54 L189.42,213.3 L201.36,207.73 L217.23,203.25 L238.28,200.1 L265.24,198.78 L269.37,198.47 L269.98,182.93 L268.74,171.32 L266.05,163.7 L261.58,157.72 L255.24,153.24 L247.06,150.32 L235.44,149.13 L224.71,150.05 L215.91,153 L210.23,156.86 L207 .64,160.85 L207.19,165.28 L209.34,169.86 L212.01,174.15 L212.14,177.99 L209.8,181.78 L204.22,185.79 L197.62,187.68 L188.65,187.43 L182.41,185.39 L178.45,181.77 L176.2,176.9 L176.03,170.64 L178.2,164.13 L183.09,157.69 L191.04,151.36 L202.01,145.82 L216.09,141.57 L232.08,139.24 L250.0 7,139.18 L266.13,141.23 L279.05,145.06 L289.15,150.3 L295.91,156.19 L300.73,163.41 L303.85,172.47 L3105.7104.871.710.47

M243.99,64.95 L255.92,66.06 L266.21,69.28 L274.98,74.44 L280.64,80.19 L284.02,86.85 L285.26,94.52 L284.27,102.84 L281.24,109.66 L276.03,115.43 L267.89,120.46 L257.68,123.93 L245.79,125.33 L232.93,124.53 L222.21,121.74 L213.14,117.11 L207.36,111.92 L203.7,105.75 L201.94,98.18 L202.34,90.12 L204.86,83.4 L210.01,76.81 L217.49,71.33 L227.17,67.31 L238。 35,65.2 L243.75,64.95 L243.99,64.95Z

M269.99,212.88 L269.48,208.76 L266.59,208.36 L245.76,210.86 L230.95,214.67 L220.9,219.34 L213.82,224.85 L209.69,230.71 L207.92,237.03 L208.4,244.49 L210.86,250.57 L215.2,255.08 L221.69,258.13 L230.57,259.43 L242.52,258.58 L255.27,255.23 L266。 07,250.04 L269.34,247.02 L269.99,244.81 L269.99,212.88 L269.99,212.88Z

M243.63,73.34 L235.93,74.4 L230.07,77.36 L225.65,82.21 L223.05,88.57 L222.41,96.92 L223.94,104.53 L227.23,110.22 L231.99,114.29 L238.44,116.65 L246.81,116.94 L253.73,115.1 L258。 87,111.5 L262.63,106.12 L264.64,98.93 L264.59,90.25 L262.47,83.41 L258.65,78.43 L253.37,75.08 L246.06,34343.343.343.343.243.243.343.43

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



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

//为孔创建路径
varsmileyEye1Path = new THREE.Path();

//第一个洞
smileyEye1Path.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 );

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

三.js r.58

附言友情提示:在 future ，让人们可以轻松地帮助您将是一个好主意——编辑您的变量名称并从您的示例中删除不相关的代码。