3DCGな画像が…物理計算も煩雑な手続き記述もなく、ブラウザなエディタを使ってJavaScript書いて…サクっと作れちゃった驚き
仕事が詰んでてイラッとしたので、気分転換に3DCGのハンズオンに行ってきました。
jQuery初心者超歓迎！スマホWebVR作品を1日で作ってVRCの大賞10万円を獲りに行くハンズオン - スマホWebVR制作 | Doorkeeper
3DCG…Oculus Riftも買うくらい、3D（見るのが）好きなんですが、自分でコンテンツ作れないんです…UnityもUnreal Engineも使ってみたけど…挫折orz
こんな私でも「jQuery初心者超歓迎！」なら、できるかも…と期待して。
以前に「超簡単に3DCGできるJavaScriptライブラリ作った - aikeの日記」を読んでちょっと試してみていたので、こんな感じなのかなー？と予想…したのですが、それよりもお手軽な感じでした！
実際に使ったもの
jThree - 3DCGと立体音響が数行で動くWeb3Dライブラリ
jThreeは、three.jsのラッパー＋αで、タグで簡単に書けるようになってます。
jThirdは、jThreeなどを使ってコンテンツ作成＆公開するためのプラットフォーム。
すでにMMDモデルなどが用意されているし、ペタペタ貼り付けで作れるようになってます。公開時に、モデルなどの素材提供者への著作権明記しなきゃいけないとこも、このプラットフォームは素材提供時に登録した内容から自動的に表示してくれるから、作り手さんみんなに優しい環境♪
とりあえず、チュートリアルあるから、やってみるといい。
チュートリアルの準備
- https://jthird.net/ にアクセスする。トップページから音が出るから注意。あと、Firefoxだとスクリプトが固まるので、Google Chromeからアクセスすることをお勧め。
- 画面左に「Anonymous Sign Up」とあるところをクリックして、簡易サインアップのIDを発行する。パスワードは必要、メールアドレスは不要。（ちなみに、通常の「Sign Up」はメールアドレス要で、IDは自由に決められる。）
- エディタ画面が開く。
- 開いたエディタ画面で、中央近くにある＋記号のところをクリックして、新しいプロジェクトを開く。何か名前を入れる必要があるので、半角英数でとりあえず何か入れる。エディタの解説はこちら→jThird Editorの使い方 - Qiita 。（Anonymousでサインインしていると一部表示内容に違いがあるけれど、使い方は同じ。）
チュートリアル
- jThree備忘録 にある「初音チュートリアル」の「①ミクを表示」を参考にする。
- 開いているタグは、自分で書かずに挿入で入れる。タグを入れたいところをクリックしておいてから、挿入をクリックする。
- 何か入力するつど、ctrl + cで保存しておくと安心。画面上部のフロッピーディスクアイコンをクリックしても保存する。
- 「①ミクを表示」を保存した時点で、ウィンドウ右枠の画像が出るところに、MMDモデルが出てるはず。このモデルは、このままマウスでクルクル動かして、どの角度でも見られる。
- 「③音楽を鳴らす」のところは、入るタグがチュートリアルとは変わっているので「音源の設置」だけ行って「再生の制御」は、やらない。タグが入ったら、保存して、MMDモデルが出てる右枠のところにある再生ボタンを押してください。音が出ます。
- 「④ステージに立つ」は、「Unityちゃんステージ」「テンポステージD」「カンテリオ王国」を選んだら「Xファイルプラグイン」は必要ない。
- 「⑤カメラ位置」は、最初から調整済みのため必要ない。
ここまで、MMDモデルをクラウディアさん・ステージをテンポステージDで試したときの例が↓これ。
この環境、ひとことで言って、簡単！楽しい！
こういうMMD使ったハンズオンからスタートしたのですが、ちゃんと立方体のモデルなどを使って…のコンテンツもタグの貼り付けで簡単に作れました。楽～♪
JavaScriptで連携できるものは使えることが多いようで、Milkcocoa 使ってのサンプルとかも作ってみたので、そのうちどこかで公開したいです。
おみやげに Google Cardboard をもらったのですが、作ったコンテンツを2眼のスマホVRモードにするにも、ペタっとタグを貼るだけなので、とっても簡単に見ることができました。もちろん、Oculus Riftモードもありました！
jThirdとjThree…3DCGへの入り口として、プログラミング初心者でも始めることができるレベルになっていて、素材も最初から入ってるから「あー、やってみたいなー」という気まぐれな勢いでスタートできちゃうところが、すごくイイと思います。
今回のハンズオン「jQuery初心者超歓迎！」とあったのですが、ほんと、その通りだと思います。
これで何か作りながら、jQuery とか JavaScriptとか覚えていけばいい。目に見える成果があるから、励みになる！
こういうところからプログラミングの勉強ができれば、楽しいだろうなーって。
jThirdで jThreeに慣れていって、もっと自分の自由度が欲しくなったらthree.jsとかに手を出せばいいし、そのころにはJavaScriptも使いこなせるようになっているだろうと思うし。
（ある程度の）物理計算も一発で入るし素材も用意されてるし、お手軽すぎて邪道なのかもしれないけれど、これくらい簡単にできれば、誰だってやりたくなるし、その中の数人でもいいから、どんどん本格的な3DCGを学び始めればいいんだと、私は思います。
で、さらにおもしろかったのが、これを作ったお兄さん本人！
jQueryとJavaScriptとPHPしか使えないヒトなんです！と豪語するwww
なんか名前に記憶ががが…と思ってググったら「きじピッたん」のヒトでしたw
