読者です 読者をやめる 読者になる 読者になる

S.F. Page

Programming,Music,etc...

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

three.js nw.js d3.js svg JavaScript WebGL HTML5 nw.jsでデスクトップアプリを作る

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

https://00toxq.dm2301.livefilestore.com/y2pNGWCgOtzI8fyvn7madrQxr7KBoJzwTwhhVp9H2blsPtVN-bAgauea7tJxK3OqDHNA2J2llV4_07mme2_qUKK5pOWM14UYh27Nd3v0R7k0Qh2scqInP-YmNOj_6CpbyXchgNTk7WdbxybVu9p90VfyA/030103.png?psid=1

 

ソースコードと動くサンプル: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とぜんぜん関係なくなってきてるな。。