3DデータからSVGを出力する。

現在、個人制作しているWEBサイトは、図解をメインにしたサイトを目指しているので、SVG画像を多様しています。複雑な図ではなく、簡単な説明図なのであえてSVGにしています。基本的には、Illustratorで描きSVG出力するのですが、3DデータのSVG化ってどうなんだろうと始めたところ、まあまあ使えるって感じになったので、その備忘録を書きます。

3Dは完全な素人なのですが、3Dプリンターにすごく興味があり、その習得という側面もあって3Dは始めました。使った3Dソフトは、FreeCAD。

FreeCADからSVGの出力

FreeCADには、三面図などを出力できるTechDrawという機能があり、この機能を使用すると以下のようなシートが出力できます。

このシートがSVGで出力できるので、ここから立体図を取得でき、イラレで編集可能。

ただ、この方法だと、アイソメトリックが基本。私が欲しい角度の立体図と違う。アイソメ以外が出力できないわけではないのですが、数値入力の方法がわからない。
Direction [0.58 -0.58 0.58]、XDirection [0.71 0.71 0.00]で、アイソメになるようだが、他の角度を得るのにはどの数値をいじるか分からなかった。

欲しい角度の図を得るためにBlenderを使う

BlenderにFreeCADのデータをインポートするには、Wavefront OBJでエクスポートする。
インポートするときは、前方を「Xが前方」、上を「Zが上」を選択する。縮尺に関してはいまいち理解が足りなく、毎回調整している。

カメラのレンズタイプを平行投影にすると、こうなる。

床のタイルを比較するとわかりやすいかも。初期状態は奥の方のタイルが遠近法で小さい。
これで、欲しい角度の画像が数値入力で設定できます。

ここからFreeStyleという機能を使って線画を表示していくのですが、Blenderを触るのが初めてなので、いろんなブログや動画を見てどうにか設定したので、詳細はまたの機会に。

FreeStyleを使ってレンダリングをすると、SVGの画像を得ることができます。イラレで開くとこんな感じ。

 

最終的にイラストを制作したいのに、3Dデータをつくり、レンダリングをするという、なんか無駄の多い作業ですが、3Dに関して興味があったので得るものが多かったと思います。