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

Question

我想知道是否有人听说过一些javascript可以采取一个简单的SVG路径,花了大约30秒在illustrator或其他东西创建并将其转换为看起来像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.

这里有一个可能的出发点(单击答案的小提琴): 挤出多个具有多个孔的多边形并对组合形状进行纹理化

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/