paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

ゲーム開発にも最適!ブラウザ上ですぐに3Dモデルが作成できる「3DC」を使ってみた!

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

今回は、「立体的な3Dモデルを簡単に作ってみたい!」という人にオススメなWebアプリが公開されているのでご紹介しようと思います!

ブラウザから即座に起動でき、プラモデルを組み立てるような感覚で手軽に3Dモデルを作成可能、さらにユーザー同士でのシェアや「ファイルへの書き出し」などもすべて無料で利用できるスグレモノですよ。

3DC

f:id:paiza:20170607111429j:plain

■「3DC」の始め方

それでは、実際に「3DC」を使いながらどのようなWebアプリなのかを見ていきましょう!

まずはサイトにアクセスして、トップ画面にある「スタートボタン」をクリックします。
f:id:paiza:20170607111448j:plain


認証画面が表示されますが、登録せずに利用できるボタンがあるのでコチラをクリックしましょう。
f:id:paiza:20170607111500j:plain


すると、すぐに「3Dモデル制作エディタ」が起動します!
f:id:paiza:20170607111511j:plain
あとは、このエディタ上で好きな3Dモデルを制作することが可能で、保存や書き出しを行ったり、シェアすることも簡単にできるようになります。

■基本的な使い方

3DC」を使った3Dモデルの作成において、まず最初に知っておくべき基本操作は3つだけです!

画面右側にある「基本ツール」を見てください。
f:id:paiza:20170607111528j:plain
この3つのアイコンを切り替えることで、対象のオブジェクトを簡単に操作できるようになっています。


例えば、「移動ツール」を選択すれば、オブジェクトをX軸・Y軸・Z軸へ自由に移動させることができます。
f:id:paiza:20170607111540j:plain


「拡大・縮小ツール」を使うと、オブジェクトのサイズを大きくしたり小さくすることができます。
f:id:paiza:20170607111550j:plain


「回転ツール」は、オブジェクトを自由な角度に回転させることができます。
f:id:paiza:20170607111601j:plain
これら3つのツールを使うことで、3Dオブジェクトを好きなカタチに変え、自由に配置することが出来るようになるわけです。


また、あらかじめ用意されている多彩なオブジェクトを組み合わせれば、あらゆる形状を組み立てることが可能です!
f:id:paiza:20170607111623j:plain


もちろん、カラーパレットを使って色を変更することもできます。
f:id:paiza:20170607111634j:plain
このように、さまざまなオブジェクトを粘土細工のように伸縮させ、プラモデル感覚で組み合わせていくだけで、車・家・家具・動物・人体…など、さまざまな形状を作成することが出来るわけです!


基本的な使い方については、公式動画もあるのでコチラもぜひ参考にしてみてください!

■便利な機能の紹介

3DC」には、他にも便利な機能がたくさん搭載されているので、その一部をピックアップしてご紹介致します!

例えば、用意されているオブジェクトだけでなく、マウスで手描きすることで自由な形状を制作できるエディタが搭載されています!
f:id:paiza:20170607111658j:plain
このように、2Dのキャンバス上に好きなデザインを手描きしていきます。


すると、立体的な3Dオブジェクトに変換されるのです!
f:id:paiza:20170607111711j:plain
変換されたオブジェクトは、同じように拡大・縮小・回転…なども行えるので、さらに自由度の高い3D制作が実現します。


また、テキストを入力することで、そのまま3Dモデルに変換する機能もあります!
f:id:paiza:20170607111725j:plain
この機能を活用すれば、ロゴデザインやゲームのタイトルなど、さまざまな応用ができるでしょう。


オブジェクトを複数組み合わせた場合は、「グループ化」機能を使えば1つにまとめることができます。
f:id:paiza:20170607111736j:plain


そうすれば、同じものをコピーしたり移動・拡大・縮小…など、さまざまな操作を簡単に行えるので便利です!
f:id:paiza:20170607111746j:plain


さらに面白いのが「Subtract」機能です!

サンプル例として、球体と円筒状のオブジェクトを用意しました。
f:id:paiza:20170607111800j:plain


そして、球体を円筒状のオブジェクトにめり込ませていきます。
f:id:paiza:20170607111809j:plain
この状態で、「Subtract」機能をクリックしましょう。


すると、めり込んだ球体のカタチを、そのままくり抜いたような状態にすることが出来ます!
f:id:paiza:20170607111823j:plain
この機能を活用すれば、より複雑な3Dモデルを構築することが出来るのでオススメです!


3DC」は、作成した3Dモデルをユーザー同士でシェアする「Feed」機能を持っており、画面右上にあるアイコンから閲覧できます!
f:id:paiza:20170607111844j:plain
新しく作成された3Dモデルや、人気の高いモノを順番に閲覧できるようになっています。


例えば、「箱庭」をデザインしたような3Dモデルや…
箱庭3Dモデル
f:id:paiza:20170607111911j:plain


さまざまな3Dキャラクターを作成した事例や…
複数の3Dキャラクターモデル
f:id:paiza:20170607111935j:plain


迫力満点の恐竜を3Dモデルにした事例などがあります!
恐竜の3Dモデル
f:id:paiza:20170607112007j:plain
ちなみに、これらのユーザーがシェアしている3Dモデルは、「フォーク」するような感じで自分なりに改造したり編集することも可能なのが特徴的です。

3Dモデルの作成において、どのような方法で構築しているのかを勉強することもできるので、積極的に活用していきたい機能だと思います。

■3Dモデルの「書き出し」機能について!

ある程度、3Dモデルが完成したらファイルに書き出してみましょう!

方法は簡単で、画面左上にあるメニューをクリックします。
f:id:paiza:20170607112031j:plain


表示されたメニュー内の「書き出し」に関する項目で、「OBJ」か「STL」形式を選択します。
f:id:paiza:20170607112041j:plain
すると、ファイルをダウンロードすることができるので、別途3Dモデル制作ソフトウェアにインポートしたり、Unityなどのゲームエンジンで利用することが出来るわけです!


ちなみに、以前ご紹介したブラウザ上で3Dゲームが制作できるWebサービス「nunuStudio」でも読み込んで利用できます!
paiza.hatenablog.com

f:id:paiza:20170607112113j:plain
この場合、3Dモデルの制作からゲーム開発まで、すべてブラウザ上で実現できるので大きな魅力となるでしょう。

また、ファイルに書き出せることで、より高度な機能を持った専門のモデリングソフトで仕上げを行うような作業の進め方もできますね。

■【おまけ】スマホアプリについて!

3DC」は、スマートフォンでも利用できるように、iOS / Androidアプリが公開されています!

f:id:paiza:20170607112134j:plain
PCのWeb版と同じ機能があり、スマホだけで手軽に3Dモデルの制作ができるので非常に便利でしょう。(今回ご紹介した内容は、すべてスマホでも利用できます)

また、指でタッチしながら操作できるので、こちらの方が扱いやすいという人も少なくないのではないでしょうか。

特に、手描きエディタに関しては、マウス操作よりもタッチ操作で描く方が簡単で使いやすいと思います!

■動画で学べるpaizaラーニングに「ゲームエンジニア入門編」が新登場!


動画で学べるオンラインプログラミング学習サイト「paizaラーニングでは、ゲームエンジニア入門編1: キャリアや働き方について学ぶのレッスンを公開中です!

ゲームエンジニアとしてのキャリアや働き方について学ぶことで、就職・転職活動の方向性や、より自分とマッチする企業や職種を探す手助けとなります。

既にゲームエンジニアを目指して就職・転職活動中の方はもちろん、「まだ活動はしていないけど興味がある」「ゲームエンジニアってどんな仕事?」という方にも役立つレッスンとなっております。

◆動画レッスンの内容

01:はじめに
02:ゲーム業界の種類
03:ゲーム開発業態
04:業態ごとの開発手法の違い
05:開発工程ごとの必要となる技能
06:ゲーム業界の職種

■まとめ

3DC」は、海外の学校や大学などでも利用されており、初めて3Dモデルを制作する人にも最適なWebアプリです。公式サイトでは教育用のレッスンカリキュラム(英語)も提供しており、ダウンロードして利用できるようになっています。

ブラウザ上で動かしても動作が軽快で、扱いやすくするための工夫もたくさんあるので、ぜひみなさんもこれを使ってオリジナルの3Dモデルを作ってみてはいかがでしょうか!


<参考>





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

↓詳しくはこちら
paiza.jp

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza