【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); }
表示してくれました
なぜ、逆さまなんだ!