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

こんにちは！

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

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

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

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

デモはこちら↓

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

1. inkscapeで形を書く
2. three.jsとd3-threeD.jsを読み込む
3. svgを記載する
4. three.jsで表示する
- 4.1. svgをパスからシェイプに、シェイプからジオメトリに変換する
- 4.2. マテリアルを追加

inkscapeで形を書く

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

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

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

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

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

下書きした画像を取り込み、イラストを描く【Inkscape】

Inkscapeで初めてイラスト書いてみました。クオリティは低いですが...、楽しく書きました。ビットマップのトレース、オブジェクトをパスに変換、グラデーションなどの機能も紹介。

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

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

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

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

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

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

Three.jsの使い方を勉強してみた導入から表示まで

「初めてのThree.js」を使い、学習した記録です。シーン、カメラ、レンダラーメッシュ、ジオメトリとマテリアルなど入門編です。

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

https://github.com/asutherland/d3-threeD

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


<script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r127/three.min.js"></script>
<script type="text/javascript" src="./js/d3-threeD.js"></script>

svgを記載する

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


//three.jsで表示する場所
<div id="myCanvas">
</div>
//svgを貼り付ける場所
    <div style="display:none">
        <svg
        xmlns:svg="http://www.w3.org/2000/svg"
        xmlns="http://www.w3.org/2000/svg"
        x="0px" y="0px" width="1152px" height="1152px" xml:space="preserve"
        >
        <g>
        <path
            id="sphere"
            d="M 135.31547,185.20833 85.41609,162.06552 36.331154,186.88904 42.921517,132.28039 4.1448691,93.268727 58.117318,82.661534 l 25.119651,-48.93405 26.766441,48.053047 54.30145,8.768754 -37.42988,40.305605 z"/>
        </g>
    </svg>
    </div>

//three.jsで表示する場所

</div>

//svgを貼り付ける場所

<svg

xmlns:svg="http://www.w3.org/2000/svg"

xmlns="http://www.w3.org/2000/svg"

x="0px" y="0px" width="1152px" height="1152px" xml:space="preserve"

<g>

<path

id="sphere"

d="M 135.31547,185.20833 85.41609,162.06552 36.331154,186.88904 42.921517,132.28039 4.1448691,93.268727 58.117318,82.661534 l 25.119651,-48.93405 26.766441,48.053047 54.30145,8.768754 -37.42988,40.305605 z"/>

</g>

</svg>

</div>

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

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

three.jsで表示する

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

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

Three.jsの使い方を勉強してみた導入から表示まで

「初めてのThree.js」を使い、学習した記録です。シーン、カメラ、レンダラーメッシュ、ジオメトリとマテリアルなど入門編です。

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

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

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


   //svgのパスをとってくる
   const svgString = document.querySelector("#sphere").getAttribute("d");
    
   //パスからシェイプに変換
   const shape = transformSVGPathExposed(svgString);

//svgのパスをとってくる

const svgString = document.querySelector("#sphere").getAttribute("d");

//パスからシェイプに変換

const shape = transformSVGPathExposed(svgString);

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


const options = {
                    amount: 10,//厚み
                    bevelThickness: 15,//角の厚み
                    bevelSize: 2,　//角の大きさ
                    bevelSegments: 3,//角の分割数
                    bevelEnabled: true, //角を丸める
                    curveSegments: 12,　//曲線上の点の数
                    steps: 1 //厚みの分割数
                };

 //shapeからジオメトリに変換
 const geometory =new THREE.ExtrudeGeometry(shape,options);

const options = {

amount: 10,//厚み

bevelThickness: 15,//角の厚み

bevelSize: 2,　//角の大きさ

bevelSegments: 3,//角の分割数

bevelEnabled: true, //角を丸める

curveSegments: 12,　//曲線上の点の数

steps: 1 //厚みの分割数

};

//shapeからジオメトリに変換

const geometory =new THREE.ExtrudeGeometry(shape,options);

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

パスシェイプから押し出しジオメトリを作成します。
引用元：https://threejs.org/docs/#api/en/geometries/ExtrudeGeometry

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

マテリアルを追加

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


const meshMaterial = new THREE.MeshLambertMaterial({color:0xf21170,
                    opacity: 0.8,
                    transparent: true,
                    side: THREE.DoubleSide,});
const mesh = new THREE.Mesh(geometory, meshMaterial);
scene.add(mesh);