挤出，或者将2d SVG路径导入3d [英] Extrude, or, make 2d SVG path into 3d

问题描述

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

I am wondering if anyone has heard of some javascript which can take a simple SVG path that took maybe 30 seconds to create in illustrator or something and convert it into something that looks 3d. There is an extrude function in illustrator which does this. It is also called polling in sketchUp.

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

I am using Raphael.js now, but am open to other suggestions. A simple solution would be to make a copy of the path and move it a couple pixels down and to the right and give it a darker color behind the original path, but I am looking for something that might have a little more shading.

谢谢！

推荐答案

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

There is always a possibility to use three.js for extruding the path for use in webGL in browser:

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 。

It uses js-fonts and parses the path commands on them, extrudes the paths and renders the scene. In the same way it should be possible to take an SVG path and extrude it. Raphael has Raphael.parsePathString() which gives you the path segments as an array of individual segments. If you first convert the path commands to cubic curves using Raphael.path2curve() and Raphael._pathToabsolute(), you have only only one segment type so you can use three.js:s BEZIER_CURVE_TO command. If you have transformations applied on the path (which is usually the case in Illustrator export) you can flatten them using function from here: https://stackoverflow.com/a/13102801/1691517.

这里有一个可能的起点（点击答案的小提琴）：
< a href =https://stackoverflow.com/questions/16124691/extruding-multiple-polygons-with-multiple-holes-and-texturing-the-combined-shape>挤出多个多边形的多边形并对组合形状进行纹理化

One possible starting point is here (click the fiddle of the answer): 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.js supports few path commands, but have not tested all of them ( http://threejsdoc.appspot.com/doc/three.js/src.source/extras/core/Path.js.html, see below).

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路径进行多边形化，因此无需依赖其他命令而不是移动到和lineto。

I have used a custom rather complex function to polygonize SVG path, so was no need to rely to other commands than moveto and lineto.

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

The downside is of course rather low support level for webGL, 31-53%: http://caniuse.com/webgl

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

Other more cross-browser solution is this SVG3d library if lesser quality and slowness is not an issue:

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

这篇关于挤出，或者将2d SVG路径导入3d的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！