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

three.jsのlinewidth効かへんメモ

ある程度太めのライン(2D)をうにょうにょさせたいっていう要望があって、
それならthree.jsのLineBasicMaterialのlinewidth設定すれば一発だろうと思ってて、
即「できます!」って答えたんだけど、
このプロパティまったく効かへん。。。
なに設定してもずっと1pxの細い線のまま、、
前できてたような気がしたんだけど記憶違いだったか、、

ウニョ線は色々汎用性の高い表現なので、
できればWebGLでできるように無理やり解決しておきたくて、
(Canavsなら線幅変えられる。何回もやったことあったなと思ってたのはたぶんCanvasのことだった)
調べたらTubeBufferGeometryっていうよさそうなのがあって、
これカメラ固定して表示したらまんま2Dのラインだな。
と思って試したらそれっぽくなった。

f:id:ikeryou:20170317205247p:plain
線太くするテスト

アニメーションさせるときに頂点一から計算し直したりしてるからやりすぎ注意。まだ改善できそう。

githubにもUPしたので興味ある方はぜひ。

ウニョ線書いてるクラスはここ