TL;DR

環境構築がめっちゃ楽なThree.jsを広めたい＆ミクさんを動かしてみたので見てほしい

はじめに

前回の記事はKeiuおさんによる「Hack U 2019 FUKUOKA」について。自分も先日JPHacksというハッカソンに参加してきたのでわかるんですが、他の大学の技術力高い学生の発表が聞けたりして楽しいんですよね。技術好きな全電通大生ハッカソン参加しよう。次回はCra2yPierr0t さんによる「マジカル☆FPGA」。いったいどんな感じにマジカルなのか。わくわくするタイトルです。

電通大生の皆さんは、ゲームを作ってみたいと思ったことがある方が多いのではないかと思います。ゲームを作ろうと思ったとき、どんなツールを思い浮かべますか？Unity？Unreal？でも、僕はThree.js。どうしておすすめするかというと、環境構築がめっちゃ楽だからです。

プログラムもシンプルで理解しやすいと思います(コナミ)。あとJavascriptだけで動くのでGithub pagesとかで公開できたりとお手軽です。

環境構築

サンプルプロジェクトをクローンしてきます。
- プロジェクトといってもhtmlが一枚あるだけなのでコピペでも大丈夫です。
Pythonをインストールします。
- インストール方法についてはこちらで詳しく解説されています。
- 3系にしましょう。
プロジェクトのあるディレクトリでpython -m http.server 8000コマンドを入力します。
- これは、プロジェクトのディレクトリをドキュメントルートとして起動する、単純なhttpサーバーです。
ブラウザでlocalhost:8000を開く。
- 下のような画面が開くはずです。

これにて開発の準備(環境構築)は終了です。お疲れ様でした！

簡単でしょう？Unityで挫折した自分でもこれなら大丈夫でした()

改造してみる

index.htmlを見ると、init()とanimate()という二つの関数が順番に動いていることがわかると思います。

init()でシーン・物体・ライト・カメラ・レンダラなどを用意
animate()を再帰的に呼び出して、レンダリングを繰り返す

という流れになっています。

では、今表示されている立方体がキー入力で回転するように改造してみましょう。 JavaScriptではwindow.document.onkeydownというオブジェクトにキー入力があったときの動作を指定できます。なのでanimate()内で

    // 箱を回転させる
    window.document.onkeydown = function(event){
        if (event.key === 'Enter') box.rotation.x += 0.01;
    };

のようにして、「Enter」キーが入力されたときに、boxのx軸回転を加算してあげるようにします。これがanime()実行毎(毎フレーム)動くので、「Enter」キーを入力すれば回転するようになるはずです。

ミクさんを歩かせてみた

応用例？としてMMDモデルのミクさんを歩かせてみたデモを貼っておきます。 https://one-color-low.github.io/LoadAvatar/

基本は上でやった原理と同じです。(実はこれに2週間ぐらいかかったのはないしょ)

WASDで動きます。F12すればコードが見れると思います。

おわりに

しょぼいサンプルを載せましたが、公式にはもっと面白い作成がいっぱいあります。今回は環境構築の簡単さに注目しましたが、他にもThree.jsでやるメリットってあると思います。Webで3Dを表示できることを活かして、3Dモデルで商品紹介ページを作るとか、自分のHPをオープンワールドのゲーム空間にしてしまうとか。良かったら活用してみてください！！(何様だ)

ただの雑記

電通大生にThree.jsを布教したい