【Three.js】svgのパスを利用して表示させる

2016年12月22日

もうわけわからめああphgぱりあv

って感じででした。
調べる能力がここまでないとは。。

d3-threeDの関数使うので読み込みを忘れずに

svgで表示をしたいのではなくて、とりあえずpathを使いたいんです。
こんな感じでd3-threeDの読み込みをしてpathをうまい具合に変換してもらう。

    <script type="text/javascript" src="../libs/d3-threeD.js"></script>

d3-threeD.jsを使って、パスをシェイプに変換してマテリアルにする。

var svgpath = "205.2,144.3c14.6-15.3,23.6-36,23.6-58.8c0-46.9-38.1-85-85-85c-46.9 ";//みたいなやつ.......
var shape = transformSVGPathExposed(svgpath);//d3-threeDの関数

 
できたのをみると確かにShapeになって返ってきてる。

パスを準備

var path = "205.2,144.3c14.6-15.3,23.6-36,23.6-58.8c0-46.9-38.1-85-85-85c-46.9 ";//みたいなやつ.......

[番外]イラレからパスひろう

パス作るときに便利なのがIllustratorです。
イラレで描いたパスをテキストエディタにコピー&ペーストでパスデータとして表示してくれます。


 
 

ShapeGeometryでシェイプ作成

パスからshapeを作成
shapeからShapeGeometryでgeometoryに
materialと組み合わせてMesh作成

function set_svg(){

    var svfShape =transformSVGPathExposed(svgpath);//パスからshpae
    var geometory =new THREE.ShapeGeometry(svfShape);//shapeからジオメトリ
    var meshMaterial = new THREE.MeshBasicMaterial({color: 0xFF5343});
    var mesh = new THREE.Mesh(geometory, meshMaterial);
    scene.add(mesh);

}

表示してくれました


なぜ、逆さまなんだ!