Three JS:Geometryでバネの形状を作ってみる

   

前回は基礎固めと言う事で、three.jsで正八方体のGeometryを自作する方法を覚えました。なので今回はもう少し複雑な形状をプログラムで作ってみたいと思います。

何にしようかなーと考えた結果、三角関数で割と簡単に描けそうなバネの形状を作ってみようと思います。びよーんってやつ。

Bane

GFDL, https://ja.wikipedia.org/w/index.php?curid=256994

線で描いてみる

いきなりポリゴンをプログラミングで描くのはまだ辛いので、まずは3D空間に線でバネ(らせん)を描いてみます。

バネ上の頂点を繋げて一本の線にしていきます。バネをY軸にそって立たせるとして、x座標(横)とz座標(奥行き)は円軌道、y座標(高さ)は一定値を増加させていけばいいだけなので

角度の分だけforループを回し、geomety.vertices配列に計算した座標を追加していきます。

線の描画にはLineBasicMaterialを使いましょう。

ここまでは三角関数に慣れていれば割と簡単でした。

bane01

平面で描いてみる

それでは次に平面をばね(らせん)状にグルグルさせます。考え方としては、前章の頂点を半径違いで2セット作り、繋げて三角形の平面にしていきます。

bane_plane01

まずは頂点を配列に入れ込みます。前章と同じく角度の分だけforループで回し、内側と外側の頂点をそれぞれvertices配列に追加します。vertices配列の0,2,4,6,....番目が内側の頂点、1,3,5,7,...番目が外側の頂点です。

次は三角形の平面をfaces配列に追加します。2つの三角形の面を一つと考え、四角形を作りながらループ処理をしていきます。少し複雑ですが、上の図と照らし合わせながら見て下さい。

少し陰影が分かりづらいですが、下のように表示されました。

bane02

立体で描いてみる

いよいよ立体でバネを作ってみましょう。平面でも立体と言えば立体なのですが、切断面を多角形にしてみます。
いろいろと複雑になって来ますが、基本は平面と同じように2つの三角形の面を一つと考え、四角形を作りながらループを回す感じです。コード中のコメントを参考にして下さい。

見事バネができました!!

bane03

DEMO

それでは下記のボタンを押してデモを見てみてください。

bane03

念の為、今回使ったコード全文を載せておきます。下記コードをこのまま使う場合はthree.jsの他にDetector.jsOrbitControls.jsを読み込んでおく必要があります。createBane関数の中でバネの線・平面・立体を作ってます。冗長ですみません。

まとめ

いかがでしたでしょうか。立体まで行くと少し複雑でしたが、基本的な三角関数が分かれば割と簡単にこのくらいの形状を作れます。次のステップとしてはこのバネをびよーんとアニメーションを付けることが出来ればと思っております。また別の機会に。
また、よくよく考えたら今回のような管状の形状を作るならTubeGeometryなどを使った方が早そうですね。。まぁ、作れたからいいかな。

 - three.js , ,