Выдавить или сделать 2D SVG путь в 3D

Question

Выдавить или сделать 2D SVG путь в 3D

Мне интересно, слышал ли кто-нибудь о каком-то javascript, который может использовать простой SVG-путь, который занял около 30 секунд, чтобы создать его в иллюстраторе или что-то в этом роде и преобразовать в нечто, похожее на 3d. В Illustrator есть функция выдавливания, которая делает это. Это также называется опросом в sketchUp.

Я использую Raphael.js сейчас, но я открыт для других предложений. Простым решением было бы сделать копию пути и переместить ее на пару пикселей вниз и вправо и придать ей более темный цвет за исходным путем, но я ищу что-то, что может иметь немного больше затенения.

Спасибо!

4

javascript svg raphael

Источник

user1388017 23 апр '13 в 21:29

3 ответа

Другие вопросы по тегам javascript svg raphael

user1691517 25 апр '13 в 07:22 2013-04-25 07:22 · Answer 1 · 2013-04-25 07:22

Всегда есть возможность использовать three.js для выдавливания пути для использования в webGL в браузере:

http://alteredqualia.com/three/examples/webgl_text.html

(Больше примеров здесь: http://stemkoski.github.io/Three.js/)

Он использует js-шрифты и анализирует на них команды пути, выдавливает пути и отображает сцену. Таким же образом должна быть возможность выбрать путь SVG и выдавить его. Рафаэль имеет Raphael.parsePathString() который дает вам сегменты пути как массив отдельных сегментов. Если вы сначала преобразуете команды пути в кубические кривые, используя Raphael.path2curve() а также Raphael._pathToabsolute(), у вас есть только один тип сегмента, поэтому вы можете использовать команду three.js:s BEZIER_CURVE_TO. Если к пути применены преобразования (что обычно происходит при экспорте в Illustrator), их можно сгладить, используя функцию здесь: /questions/33105536/vyipechka-prevraschaetsya-v-svg-path-element-komandyi/33105543#33105543.

Одна из возможных отправных точек находится здесь (щелкните на скрипке ответа): выдавливание нескольких многоугольников с несколькими отверстиями и текстурирование комбинированной формы.

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_CURVE_TO: 'bezierCurveTo',       // кубическая кривая Безье
    CSPLINE_THRU: 'splineThru',             // Catmull-rom spline
    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/

user786485 25 июн '13 в 13:19 2013-06-25 13:19 · Answer 2 · 2013-06-25 13:19

Я думаю, что этот ресурс может быть полезен для вас, он использует d3 для создания 2D-визуализации, а затем использует d3-threeD для выдавливания.

2

Источник

user786485 25 июн '13 в 13:19

user109374 24 апр '13 в 09:05 2013-04-24 09:05 · Answer 3 · 2013-04-24 09:05

Похоже, вы хотите использовать фильтры SVG. http://webplatform.org/ имеет довольно хороший учебник об этом. Прокрутите немного вниз, и вы найдете несколько фильтров освещения, которые выглядят как 3d.

Raphaël не поддерживает фильтры, поэтому вам нужно либо расширить его, либо просто использовать svg напрямую.