paiza開発日誌

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

無料でブラウザ上から本格的な3Dモデリングや書き出しが可能な「VECTARY」を使ってみた!

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

今回は、ブラウザだけで誰でも簡単に本格的な3Dモデリングができるサービスをご紹介します!

ゼロから自分の好きな造形物をマウスだけで簡単に作成できるように工夫されており、アクセサリーやキャラクターなどさまざまな用途に合わせたモデリングが可能なスグレモノです。

Webサイトに挿入する3Dコンテンツなどにも利用できるので、ご興味ある方はぜひ参考にしてみてください!

VECTARY

f:id:paiza:20180815133628j:plain

 

■「VECTARY」の使い方

それでは、最初に「VECTARY」をどのように使うのかを見ていきましょう!

サイトにアクセスしたら、画面右上にある「Sign up」ボタンをクリックして無料のユーザー登録をします。

f:id:paiza:20180815133712j:plain


「メールアドレス」と「パスワード」だけですぐに登録が完了します。

f:id:paiza:20180815133732j:plain
(※Google、Facebookアカウントでも登録可能です)


すると、自分専用の「ダッシュボード」画面が表示されます!

f:id:paiza:20180815133807j:plain

この画面から新規に3Dモデリングを始めたり、テンプレートから3Dモックアップを作成できます。

また、チュートリアルなどの学習用リソースも充実しているので、ゼロから3Dモデリングを始める人でも扱いやすいでしょう。

■簡単な3Dモデリングに挑戦してみよう!

それでは、早速ですが「VECTARY」の基本的な機能を使いながら3Dモデリングをやってみましょう!

サンプル例として、ここでは簡単な「湯のみ茶碗」のような3Dオブジェクトを作ってみたいと思います。


そこで、まずは「ダッシュボード」から新規作成を選びます。

f:id:paiza:20180815133835j:plain


すると、何も無い空っぽの「3D空間」がエディタに表示されます。

f:id:paiza:20180815133852j:plain


画面左側にある「①オブジェクト」アイコンをクリックして、「②新規オブジェクト」を選択します。

f:id:paiza:20180815133907j:plain

すると「モデリングモード」になるので、基本となるいくつかのオブジェクトを選択しながら作業を進めていきます。


今回は「シリンダー」の形状を使ってみたいと思います!

f:id:paiza:20180815133925j:plain

画面内の好きな箇所にオブジェクトを配置できます。


1度目のクリックでサイズを決定し、2度目のクリックで高さを決めましょう。

f:id:paiza:20180815134011g:plain


今回は、「湯呑み」のような形状にしたいので、天面を選択したあとに「BEVEL」アイコンをクリックして「フチ」を作ります。

f:id:paiza:20180815134055j:plain


さらに、「EXTRUDE」アイコンをクリックして下方向にドラッグすることでコップのような形状を作れます。

f:id:paiza:20180815134106j:plain


GIFにするとこんな感じです!

f:id:paiza:20180815134304g:plain

これで湯呑みのようなオブジェクトが作れましたね!


ただし、このままだとあまりにもデコボコしているので「スムージング機能」をONにしてみましょう!

f:id:paiza:20180815134242j:plain


すると、瞬時にキレイな造形物に変換されます!

f:id:paiza:20180815134418j:plain

簡単ですね!

この「スムージング機能」のおかげで少ない作業数でもリアルな3Dオブジェクトが作れるので、誰でも楽しみながら挑戦できるはずです。

■手描きの3Dモデリングに挑戦してみよう!

今度は、手描きで好きな形状を直接デザインすることができる機能を使ってみましょう!

先ほどは「シリンダー」など、あらかじめ用意されている形状を利用しましたが、そのすぐ隣にあるのが「手描きモード」になります。

f:id:paiza:20180815134509j:plain

フリーハンドで描くこともできますが、上のようなグリッドに沿って描く「LINES」を使ったほうが最初は簡単でしょう。


サンプル例として、「ハート」型の形状を作ってみましょう!

f:id:paiza:20180815134523j:plain


だいたいの形状が作れたら問題ありません。

f:id:paiza:20180815134537j:plain


表面を選択しておいて、「EXTRUDE」機能で上方向にドラッグすることで立体的な造形になります。

f:id:paiza:20180815134554j:plain


あとは、先ほども利用した「スムージング」をONにしてみましょう!

f:id:paiza:20180815134607j:plain


キレイな「ハート型」のオブジェクトが完成!

f:id:paiza:20180815134629j:plain

さらに、粘土細工のようにオブジェクトを伸ばしたり縮めたり、切ったり、曲げたり、別のオブジェクトをくっつけたり…などのような基本的な機能も搭載されています。

まさに、ゼロから自分の好きなオブジェクトを簡単に作れてしまうわけです!

■3Dオブジェクトをカスタマイズしよう!

完成したオブジェクトは、エディターの設定メニューからさまざまなカスタマイズが可能です。

カラーの変更や、質感、透明度、テクスチャの変更など、細かい調整ができるので便利です!

f:id:paiza:20180815134701j:plain


また、画面下の「Materials」を選択すると膨大な数のマテリアルが用意されているのが分かります。

f:id:paiza:20180815134743j:plain

これはクリックするだけで、あらかじめさまざまな用途に合わせた調整済みの設定へすぐに反映させることができます。


例えば、以下のように「木目調」にしてみたり材質を「大理石」に変更したりなども簡単です!

f:id:paiza:20180815134810j:plain

他にも、ライティングの設定や3D空間内の環境設定などもクリックするだけで変更可能です。

■3Dモックアップを作ってみよう!

「VECTARY」には、あらかじめ作り込まれたテンプレートも用意されており、ゼロからモデリングすること無くさまざまなモックアップ画像を簡単に作成できるのでご紹介しておきます!

まず、ダッシュボード上部に表示されているテンプレートの中から、自分の気に入ったモノをクリックします。

f:id:paiza:20180815134850j:plain


すると、テンプレートの編集用エディタが表示されます!

f:id:paiza:20180815134937j:plain

すでにいくつかの3Dオブジェクトが作り込まれているのが分かると思います。


例えば、表示されているオブジェクトを「①クリック」して、「②画像変更」ボタンを選ぶと自分が用意した画像に差し替えることができます。

f:id:paiza:20180815135011j:plain

スマホのスクショなどに差し替えて、アプリ紹介用のWebサイトに使う画像コンテンツとしても利用できるでしょう。

もちろん、すべての3Dオブジェクトは選択・移動・サイズ・回転・変更などが可能で、自分で新しくオブジェクトを作成して組み合わせることも可能です。


また、画面下にある「3D Assets」は、キーワードを入力するだけですぐに利用可能な3Dオブジェクトの候補が大量に表示されます。

f:id:paiza:20180815135116j:plain


気に入ったオブジェクトをクリックするだけで、すぐにエディタ内に配置できるので好きなようにカスタマイズしながら使うことができます。

f:id:paiza:20180815135130j:plain


さらに、「Export」ボタンをクリックすれば、JPG / PNGの画像として書き出すことも可能です!

f:id:paiza:20180815135309j:plain

3Dのメリットを活かして、自分の好きな構図になるように配置を変更しながら画像に書き出せば効率よく活用できるでしょう。

もちろん、3Dファイルとしても書き出すことも可能で「STL / GLB / glTF」などに変換してダウンロードできます。(そのまま3Dプリントも可能)
テンプレートだけでなく、ゼロから自分で作成したオブジェクトも当然ながら同じように書き出すことができるので、3Dゲームのキャラクターなどを作成する用途で利用しても面白いでしょう!

■動画でプログラミングが学べるpaizaラーニングPython×AI・機械学習入門編が登場!


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

そしてこのたび、新たに「Python×AI・機械学習入門編」が追加されました。

人気声優の上坂すみれさんによる進行役のスベトラーナ・小百合・ベレフスカヤと一緒に、実際に画像認識技術を使いながら、初心者でも機械学習を体験・学習できるレッスン内容になっています。

Python×AI・機械学習入門編は全編無料でごらんいただけます。詳しくはこちら

■まとめ

今回は、ブラウザから3Dモデリングができる「VECTARY」を駆け足でご紹介しました!

シンプルに誰でも扱えるよう設計されていながら、非常に多機能なモデリングツールとしても利用できるサービスです。

公式サイトには初心者に最適なチュートリアルが用意されており、他のユーザーが作成した3Dオブジェクトも公開されているので参考になるでしょう。

ぜひ、みなさんも気軽にブラウザから3Dモデリングに挑戦してみてください!

<参考>
「VECTARY」公式サイト



 

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

詳しくはこちら

paizaラーニング

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

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

詳しくはこちら

paizaのスキルチェック