我想将SVG转换为three.js中的挤压形状。翻译是使用webgl_geometry_extrude_shapes2.html中的transformSVGPath
函数完成的。
我使用此SVG路径:
<path stroke="none" fill="#f9eebb" d="M1136.15 731.95 L1136.15 391.45 254.85 391.45 254.85 731.95 1136.15 731.95 M1418 118 L1977.6 118 1799.5 637 0 1343 0 262 126 262 126 162 1230.35 160.8 1230.05 0 1418 118 M1708.95 383.45 Q1708.95 325.35 1667.9 284.3 1626.85 243.25 1568.75 243.25 1510.65 243.25 1469.6 284.3 1428.55 325.35 1428.55 383.45 1428.55 441.55 1469.6 482.6 1510.65 523.65 1568.75 523.65 1626.85 523.65 1667.9 482.6 1708.95 441.55 1708.95 383.45" />
以下是google-svg-editor(左)和three.js(右)中的结果:应该导致圆形孔的右边框曲线未正确转换。
使用toShapes()
方法将生成的形状分割为实心形状和孔洞。
问题在于此代码中的three.js
// only Holes? -> probably all Shapes with wrong orientation
if ( ! newShapes[0] ) return toShapesNoHoles( subPaths );
有没有人知道将这种SVG转换为带孔的形状的工作方法?或者是three.js中的问题?