paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

20200204140738

ITエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

VC投資先スタートアップ企業特集

動きが超リアル!「らくがき」を1クリックで高度な3Dモデルに変換できる「Monster Mash」を使ってみた!

f:id:paiza:20210407113221j:plain
どうも、まさとらん(@0310lan)です!

今回は、誰でも簡単に「らくがき」から高度な3Dモデルを作成してアニメーション化までおこなえる無料のWebサービスをご紹介します。

ブラウザからアクセスするだけですぐに使えて、マウスかタッチ操作で適当な「らくがき」を作ったらリアルに動く3Dモデルを一瞬で生み出すことができます。

書き出しオプションも豊富なので、ご興味ある方はぜひ参考にしてみてください!

Monster Mash

f:id:paiza:20210407113250j:plain

■「Monster Mash」の使い方

それでは、「Monster Mash」をどのように使えばいいのか詳しく見ていきましょう!

利用するにあたり、ユーザー登録や面倒な設定は一切不要です。ブラウザからサイトにアクセスするだけで以下のような編集エディタが表示されます。

f:id:paiza:20210407113351j:plain

このエディタ内はマウスやタッチ操作で自由に線を描画できるようになっています。


そこで、まずは次のような丸い図形を描いてみてください。

f:id:paiza:20210407113403j:plain


そして足のようなカタチも追加してみましょう!

f:id:paiza:20210407113413j:plain


もしうまくできなかったときは「ゴミ箱」アイコンをクリックすると1つ前の描画に戻ります。

f:id:paiza:20210407113423j:plain


次に、足の部分をダブルクリックして赤色の線になるようにします。

f:id:paiza:20210407113434j:plain

すると3Dモデルに変換したときに、赤色の部分だけ同じものがコピーされます。つまり、左右対称な「足」を作成できるというわけです。

■3Dモデルを作ってみよう!

それでは作成した「らくがき」を3Dモデルに変換してみましょう!

方法はとても簡単で【Inflate】ボタンをクリックするだけです。

f:id:paiza:20210407114629j:plain


すると自動的に3Dモデルが誕生します!

f:id:paiza:20210407114639g:plain


ただのラクガキだったものが、一瞬で3D化されるのはちょっと感動です。

f:id:paiza:20210407114753j:plain


そして、この状態でモデルを引っ張ってみてください!

f:id:paiza:20210407114805g:plain

すべてのパーツが連動してリアルに動くことがわかります。


ちなみに上部メニューの「回転」ボタンをクリックすると、ドラッグ操作で3Dモデルを360度どこからでも見れるように視点を変えることもできます。

f:id:paiza:20210407114828j:plain

■3Dモデルをアニメーション化してみよう!

「Monster Mash」で作成した3Dモデルは、簡単な操作でリアルなアニメーションを作ることができます。

そこで、さきほど作成した3Dモデルに「歩く」アニメーションを適用させてみましょう!


作り方ですが、まずは【Animate】ボタンをクリックします。

f:id:paiza:20210407114850j:plain


そしてボディの中央部分を1回だけクリックして「ピン留め」します。

f:id:paiza:20210407114900j:plain

これでボディは引っ張ってもその位置から移動せずに固定されます。


同じ要領でそれぞれの足もピン留めして次のようなポーズを作ってください。

f:id:paiza:20210407114912j:plain


そして【録画】ボタンをクリックします。

f:id:paiza:20210407114922j:plain


あとはマウスをドラッグするかタッチ操作で、歩いているような軌道を描くだけです。

f:id:paiza:20210407114936g:plain

描いたあとは自動的にモーションがループ再生されるようになります。


さらに、反対の足も同じ要領でアニメーションを作ってみましょう!

f:id:paiza:20210407115009g:plain


上部メニューのオプションから【Show control pins】のチェックを外すと軌道の線やピンが非表示になります。

f:id:paiza:20210407115046j:plain


するとこんな感じで歩く3Dモデルが完成します!

f:id:paiza:20210407115056g:plain

簡単ですね!

このように「Monster Mash」を使うと、誰でも簡単に「らくがき」からリアルに動く3Dモデルを作成できるようになります。


公式サイトには、以下のようにもう少し複雑なアニメーションのサンプルデモも公開されていますよ!

f:id:paiza:20210407115221g:plain

■もっとリアルな3Dモデルを作成してみよう!

「Monster Mash」では手軽に3Dモデルを作成するだけでなく、画像やイラストなどをテクスチャとしてモデルに適用できる機能が提供されています。

これによりデフォルトの粘土質っぽい3Dモデルから、より美しくリアルな質感を実現できるわけです。


たとえば「小鳥」の画像を利用した3Dモデルを作ってみましょう!

まずは新規プロジェクトを開いて【Import template image】を選択します。

f:id:paiza:20210407115247j:plain


3Dモデルにしたい画像を読み込んだら、小鳥の輪郭や羽の部分などをなぞっていきます。

f:id:paiza:20210407115257j:plain


そして、アニメーションを追加すれば、リアルに動く小鳥の3Dモデルが完成します!

f:id:paiza:20210407115307g:plain


また別の方法として、「らくがき」をしたあとにオプションから【Export a template for texturing】を選択します。

f:id:paiza:20210407115330j:plain


すると「Monster Mash」で描いた線がPNG画像としてダウンロードできます。

f:id:paiza:20210407115514j:plain

あとはこの画像ファイルを使って、ペイントソフトなどで色付けをしてイラストを作ります。


そして、イラストを再アップロードして3Dモデルにアニメーションを適用してみましょう!

f:id:paiza:20210407115527j:plain


こんな感じでリアルに動きだします!

f:id:paiza:20210407115539g:plain


さらにオプションから【Import background image】を選択すると、背景画像をインポートできるようになります。

f:id:paiza:20210407115555j:plain


背景画像を適用すると以下のようになります!

f:id:paiza:20210407115607g:plain

背景を組み合わせると3Dモデルがより楽しいものになっていきますね。

このようにお気に入りの画像や自作のイラストなどを、誰でも手軽に3Dモデルに変換してアニメーションを作れるのは大きな特徴といえるでしょう。

■【おまけ】保存と書き出しについて

最後に「Monster Mash」の書き出しオプションについて少し補足しておきます。

上部メニューのオプションから、以下のような選択肢が表示されるのが分かります。

f:id:paiza:20210407115957j:plain

【Save project】を選択すると、現在のプロジェクトがZIP形式のファイルとしてダウンロードできます。このZIPファイルは新規プロジェクトにインポートすると、続きから再開できるので保存しておきたいときに便利でしょう。

また、別の3D関連ソフトウェアで使えるように「obj」「glb」形式のファイルとしてもダウンロードできるようになっています。これはアニメーション化された3Dモデルを書き出したいときに重宝するオプションといえます。

■動画&ゲームでプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

また、paizaでは『コードクロニクル』をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください!


■まとめ

今回は誰でも簡単に「らくがき」からリアルに動く3Dモデルを作成できるサービスをご紹介しました!

ブラウザさえあればすぐに3Dモデルを作れるのは非常に便利で、スマホやタブレットでも動作するのでどこでも楽しむことができます。タブレットだと直感的に作業ができるのでパソコンよりも使いやすいかもしれません。

ぜひみなさんもオリジナルの3Dキャラクターを作って遊んでみてください!


<参考リンク>




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら
paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら
paizaのスキルチェック

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング Copyright Paiza, Inc, All rights reserved.