挤出，或者将2d SVG路径导入3d

Question

我想知道是否有人听说过一些javascript，它可以采用一个简单的SVG路径，在插图画家或其他东西中创建需要30秒，并将其转换为看起来像3d的东西。插图画家中有一个拉伸功能。它在sketchUp中也称为轮询。

我现在正在使用Raphael.js，但我愿意接受其他建议。一个简单的解决方案是制作路径的副本并将其向下和向右移动几个像素，并在原始路径后面给它一个更暗的颜色，但我正在寻找可能有更多阴影的东西。

谢谢！

Answer 1

总是有可能使用three.js来挤出在浏览器中使用webGL的路径：

http://alteredqualia.com/three/examples/webgl_text.html#D81F0A21010#23a

（此处有更多示例：http://stemkoski.github.io/Three.js/）

它使用js-fonts并解析它们上的路径命令，挤出路径并渲染场景。以同样的方式应该可以采用SVG路径并挤出它。 Raphael有Raphael.parsePathString()，它将路径段作为一个单独的段数组。如果首先使用Raphael.path2curve()和Raphael._pathToabsolute()将路径命令转换为三次曲线，则只有一个段类型，因此可以使用three.js：s BEZIER_CURVE_TO命令。如果您在路径上应用了转换（在Illustrator导出中通常就是这种情况），您可以使用此处的函数展平它们：https://stackoverflow.com/a/13102801/1691517。

这里有一个可能的出发点（点击答案的小提琴）： Extruding multiple polygons with multiple holes and texturing the combined shape

Three.js支持少量路径命令，但尚未测试所有命令（ http://threejsdoc.appspot.com/doc/three.js/src.source/extras/core/Path.js.html，见下文）。

THREE.PathActions = {

    MOVE_TO: 'moveTo',
    LINE_TO: 'lineTo',
    QUADRATIC_CURVE_TO: 'quadraticCurveTo', // Bezier quadratic curve
    BEZIER_CURVE_TO: 'bezierCurveTo',       // Bezier cubic curve
    CSPLINE_THRU: 'splineThru',             // Catmull-rom spline
    ARC: 'arc'                              // Circle

};

我使用了一个自定义相当复杂的函数来对SVG路径进行多边形化，因此无需依赖其他命令而不是moveto和lineto。

缺点当然是对webGL的支持率相当低，为31-53％：http://caniuse.com/webgl

---

其他更多的跨浏览器解决方案是这个SVG3d库，如果质量较差和速度不是问题：

http://debeissat.nicolas.free.fr/svg3d.php https://code.google.com/p/svg3d/

Answer 2

听起来好像要使用svg filters。 Webplatform.org有一个很好的tutorial。向下滚动一下，你会发现一些看起来像3d的照明过滤器。

Raphaël不支持过滤器，所以要么你需要扩展它，要么直接使用svg。

Answer 3

我认为this资源可能对您有所帮助，他使用d3生成2D可视化，然后使用d3-threeD进行挤压。