拉伸或製作2d SVG路徑爲3d

我想知道是否有人聽說過一些JavaScript，它可以採取簡單的SVG路徑，花費30秒在Illustrator中創建或將其轉換爲看起來像3d的東西。在illustrator中有一個拉伸功能可以做到這一點。它也被稱爲sketchUp中的輪詢。拉伸或製作2d SVG路徑爲3d

我現在正在使用Raphael.js，但我可以接受其他建議。一個簡單的解決方案是複製路徑並將其向右移動幾個像素，然後在原始路徑後面給它一個較暗的顏色，但是我正在尋找可能有更多陰影的東西。

謝謝！

來源

2013-04-23 dezman

聽起來像要使用svg filters。 Webplatform.org有一個相當不錯的tutorial。向下滾動一下，你會發現一些像3d的照明濾鏡。

Raphaël不支持過濾器，所以無論你需要擴展它，還是直接使用svg。

來源

2013-04-24 09:05:12

總是有可能使用three.js在瀏覽器擠壓在WebGL的使用路徑：

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

（更多樣本的位置：http://stemkoski.github.io/Three.js/）

它採用JS-字體和解析路徑上的命令，擠出路徑並渲染場景。以同樣的方式，應該可以採用SVG路徑並擠出它。拉斐爾有Raphael.parsePathString()它給你的路徑段作爲一個單獨的部分數組。如果首先使用Raphael.path2curve()和Raphael._pathToabsolute()將路徑命令轉換爲三次曲線，則只有一個段類型，因此可以使用three.js：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/

來源

2013-04-25 07:22:25

現在是59-90％:) – 2016-11-15 22:32:23

我覺得this資源能對您有所幫助，他使用D3生成2D可視化，然後使用d3-threeD擠出。

來源

2013-06-25 13:19:37 Sai

拉伸或製作2d SVG路徑爲3d

回答

相關問題