4

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

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

谢谢！

4

3 回答 3

8

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

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

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

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

一个可能的起点是这里（单击答案的小提琴）： Extruding multiple polygons with multiple hole and textured the combination shape

Three.js 支持的路径命令很少，但还没有全部测试过（ http://threejsdoc.appspot.com/doc/three.js/src.source/extras/core/Path.js.html，见下文）。

三.PathActions = {

    MOVE_TO: '移动到',
    LINE_TO: 'lineTo',
    QUADRATIC_CURVE_TO: 'quadraticCurveTo', // 贝塞尔二次曲线
    BEZIER_CURVE_TO: 'bezierCurveTo', // 贝塞尔三次曲线
    CSPLINE_THRU: 'splineThru', // Catmull-rom 样条
    ARC: 'arc' // 圆

};

我使用了一个自定义的相当复杂的函数来多边形化 SVG 路径，所以除了 moveto 和 lineto 之外，不需要依赖其他命令。

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

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

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

于 2013-04-25T07:22:25.513 回答
2

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

于 2013-06-25T13:19:37.867 回答
1

听起来你想使用svg 过滤器。Webplatform.org有一个很好的教程。向下滚动一点，您会发现一些看起来像 3d 的照明滤镜。

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

于 2013-04-24T09:05:12.473 回答