Three.jsで作る星のカービィ

こんにちは.おいしい数学 hiraocafe.com という高校数学のサイトをやっている平岡です.下の名前が晃なので,ネットだとAKRという略称でやってます.

さて,高校数学の教材を作る上で,立体などの3Dコンテンツに使えるなと思い,Three.jsに少し前から着目しました.Three.jsはJavascriptが使えれば,こちらのics.medeaさんを見れば少し勉強すれば使えるようになると思います.かなり助かってます.

例えば,黒,赤,青,緑の4色をじゅず状に並べたとき,何通りかという問題がありますが,これはThree.jsの力を借りて,わかりやすく表現できたのでは?と思っています.ご興味があればhiraocafe.com内のじゅず順列(基本編)をご覧ください.

さて,すっかり魅了され,Three.jsで何でも表現できるのでは??と思い,急に,例えば星のカービィとか簡単に表現できるのでは?と思い,挑戦することにしました.

本体は球なので,デフォルトで用意されているジオメトリを使えば問題ないのですが,楕円体がどうやって表現するかわからない..

ネット上を探しに探して,情報を組み合わせてやっと表現できたので,以下に挑戦した結果載せます.


楕円体はParametricGeometryで作ります.楕円体を媒介変数表示するので,高校数学もわからないとですね.
せっかく作ったので,弊サイトには星のカービィに載せました.
こちらの本業は予備校講師なので,是非本業の方のすごいカービィが見てみたいです.