svgで書いたコードをThree.jsで表示する

svgで書いたコードをThree.jsで表示する

こんにちは!

プログラム学習中のdynaです。

この記事は inkscape(インクスケープ)で書いたsvgをThree.jsとd3-threeD.jsを使って表示した記録です。 

svgの値を、d3-threeD.jsでパス⇒シェイプ⇒ジオメトリに変換して表示させています。

※ちょっと情報が古かったらすみません。

こちらの本を参考に学習しています。


デモはこちら↓


 

こんな形で、inkscapeで出力したsvgをちょっと立体的に表示できます。


inkscapeで形を書く

ここでは星形を作成してみます。

星形表示のサンプル

まずは、インクスケープで星形を書いてみます。

 

inkscapeのDLはこちら⇒https://inkscape.org/ja/#

 

左の「星形ツール」角を5にして作成します。

インクスケープで星形を書く

 

※inkscapeのDL方法やイラストを描く記事はこちらにあるので、良かったらご覧ください。


一旦名前を付けて保存し、自分のエディタで開きます。

 

エディタでひらいたSVG

使うのは、<path~d=・・・・の部分になります。


three.jsとd3-threeD.jsを読み込む

作成しているHTMLファイルにThree.js、d3-threeD.jsを読み込みます。

 

three.jsのCDNはこちら⇒https://cdnjs.com/libraries/three.js

 

Three.jsをDLしてフォルダに配置する場合は、以下の記事に記載があるので、良ければご覧ください。

 

d3-threeD.jsもDLしてフォルダに配置し、読み込みます。

こんな形で読み込みます。

svgを記載する

表示するHTMLファイルに、先ほどのsvgファイルから、d=~の部分をコピーして追加します。 

 

d=~が描画のための命令文なんだって。
ちなみに、eの文字が入ってたりすると、エラーになったよ。

 

 こんな感じで、d=・・・の中にe~があるとエラーが出てました。

エラー画面

 

three.jsで表示する

ここからはthree.jsを作成する手順で記載していきます。

three.jsの使い方はこちらにもあるのでよかったらご覧ください↓

svgをパスからシェイプに、シェイプからジオメトリに変換する

ここでは svgの記載を、パスからシェイプに、シェイプからジオメトリに変換して操作できるようにします。 

まずは、パスからシェイプに変換するため、id =sphere 以下のdを取得します。


次に、シェイプからジオメトリに変換をします。

 

new THREE.ExtrudeGeometryについてはこちらを参考にしました。

パス シェイプから押し出しジオメトリを作成します。

引用元:https://threejs.org/docs/#api/en/geometries/ExtrudeGeometry

 

この options の部分で押し出しの詳細を設定してる形ね。

 

マテリアルを追加

あとはマテリアルを追加して、メッシュを作成します。

こちらで表示できました!


ちなみにsvgを変えたらこんな形も作成できます。

svgサンプル

See the Pen SVGとThree.jsの連携 by dyna (@sakudyna) on CodePen.

ここまで読んで下さりありがとうございます。