nw.jsでデスクトップアプリを作る(18) - SVG pathをthree.js shapeに変換する(2)

公開:2015-03-01 20:17
更新:2017-07-30 10:00
カテゴリ:three.js,nw.js,d3.js,svg,javascript,webgl,html5,nw.jsでデスクトップアプリを作る

描画がおかしくなるバグもようやく直った。

ソースコードと動くサンプル:SVGからthree.jsのshapeへの変換(2)

ヒントは下記記事。


Converting SVG paths with holes to extruded shapes in three.js - Stack Overflow

ようするに穴あき部分のpathは馬ボディのshapeのholesにpathで追加しないとおかしくなるのであった。この部分はsvgの時点でどこが穴あきなのかわかる情報を付加しないとthree.jsではうまく変換することができない。なので私はpathのid属性に穴のpathは「holeXXXX」とつけて識別できるようにした。馬ボディのpathは「horsexx」としてある。

とりあえずChromeとFirefoxは動作することを確認した。Win10 Tech Preview 9926 のIE11では動作しなかった。

これでようやく次のステップに進める。しかしnw.jsとぜんぜん関係なくなってきてるな。。