javascript - 将 2d SVG 路径挤出或制作成 3d

Question

我想知道是否有人听说过一些 javascript 可以采用简单的 SVG 路径，这可能需要 30 秒才能在 illustrator 或其他软件中创建并将其转换为看起来像 3d 的东西。 illustrator 中有一个挤出功能可以做到这一点。它在 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 字体并解析其上的路径命令，挤压路径并渲染场景。以同样的方式，应该可以采用 SVG 路径并对其进行拉伸(stretch)。 Raphael 有 Raphael.parsePathString()，它为您提供路径段作为单个段的数组。如果您首先使用 Raphael.path2curve() 和 Raphael._pathToabsolute() 将路径命令转换为三次曲线，您只有一种线段类型，因此您可以使用三种。 js:s BEZIER_CURVE_TO 命令。如果您在路径上应用了转换(在 Illustrator 导出中通常是这种情况)，您可以使用此处的函数将它们展平:https://stackoverflow.com/a/13102801/1691517 .

一个可能的起点在这里(点击答案的 fiddle ): 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/