paiza times

paizaがお届けする、テック・キャリア・マネジメント領域における「今必要な情報」を届けるWebメディア

logo

paizaがお届けする、テック・キャリア・マネジメント領域の「今必要な情報」を届けるWebメディア

ラフなスケッチを描くように3Dモデルを作成できるWebエディタ「Penzil」を使ってみた!

f:id:paiza:20211208103028j:plain

どうも、まさとらん(@0310lan)です!

今回は誰でも簡単にオリジナルの3Dモデルを素早く作成できる完全無料のWebエディタをご紹介します!

PC・タブレット・スマホのブラウザに対応しており、サイトにアクセスするだけですぐにでも利用できます。特殊なキャンバス上にスケッチ感覚で線を描いていくだけで、立体的な構造物やキャラクターなどを手軽に作成できるのが特徴です。

3Dモデルの構築にご興味ある方はぜひ参考にしてみてください!

Penzil

f:id:paiza:20211208103112j:plain

■「Penzil」の使い方

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

面倒なユーザー登録や初期設定などは一切不要で、サイトにアクセスすればすぐに専用のWebエディタが表示されます。


白色の部分がキャンバスになっているので、あとはそこへ線を描いていくだけです。

f:id:paiza:20211208103137j:plain

マウスでの操作はもちろんですが、タッチディスプレイであれば指を使って描くこともできます。


このキャンバス自体は平面なのですが、X・Y・Z軸に移動や回転をさせることができます。

f:id:paiza:20211208103151g:plain

これが「Penzil」の大きな特徴になっており、平面のキャンバスに線を描いていくだけで立体的な3Dスケッチができるわけです。


例えば、キャンバスに適当な線を描いてみましょう。

f:id:paiza:20211208103227j:plain


次に、キャンバス上に表示されているコントローラーを見てください。これをドラッグすることでキャンバスを「移動」させたり「回転」させることができます。

f:id:paiza:20211208103242j:plain


実際にキャンバスを操作するとこんな感じになります。

f:id:paiza:20211208103254g:plain


この仕組みに慣れると、以下のように3Dスケッチを手軽に実現できるようになります。

f:id:paiza:20211208103318g:plain


この制作過程はYouTube動画でも公開されているので、ご興味ある方はぜひ参考にしてみてください。


<参考リンク>
「Penzilのサンプデモ」|YouTube


ちなみに、キャンバスの移動・回転は無段階に調整できるのですが、慣れないうちはエディタメニューの「Snap」機能をONにしておくことをオススメします。

f:id:paiza:20211208103400j:plain

これはキャンバスの移動量・回転量を最小のグリッド単位で行える機能です。エディタ内は3D空間になっているので、キャンバスの位置を把握するのに役立ちます。

例えば、キャンバスをある一定の間隔で移動させたりする場合は「Snap」機能があると作業がしやすくなるわけです。


また、「Penzil」のエディタはPCブラウザだけでなく、スマホのブラウザからでも利用可能です。

f:id:paiza:20211208103418j:plain

スマホの方がより直感的に3Dスケッチができるので、タッチ操作に慣れている人はこちらの方が作業しやすいかもしれません(もちろんタブレットでもOK)。


また、エディタの画面を操作する方法がPCとスマホで少し違います。よく使う「パン移動」と「拡大・縮小」の操作は以下のようになるので覚えておきましょう。

<PCの場合>

  • 【パン移動】「スペースキー」+「ドラッグ」
  • 【拡大・縮小】「マウス右ボタン」+「ドラッグ」

<スマホの場合>

  • 【パン移動】三本指で「ドラッグ」
  • 【拡大・縮小】「ピンチイン・ピンチアウト」

■キャンバスの種類を変えてみよう!

実を言うと「Penzil」は、平面のキャンバスだけでなくいくつかの種類が標準で搭載されています。

エディタ左上の選択リストを開くと、キャンバスの種類を選べるのが分かります。

f:id:paiza:20211208103505j:plain

平面のキャンバス以外に、立方体・円柱・球などが選べます。もちろん、これらの立体的なキャンバスも自由に拡大・縮小ができます。


人物の顔をそのままキャンバスにしたものまであり、作り込めば自分の3Dアバターを作成することも可能です。

f:id:paiza:20211208103517j:plain


また、このような立体的なキャンバスの場合、線を描くとちゃんと立体構造の形状に追従してくれるのが特徴的です。

例えば、円柱のキャンバスを選んでみてください。

f:id:paiza:20211208103530j:plain


この円柱に沿って、次のように線を何本か描いてみましょう。

f:id:paiza:20211208103543j:plain


やっていることは平面のキャンバスに描いているのと同じなのですが、仕上がりは立体的な3Dモデルになっているのが分かります。

f:id:paiza:20211208103559g:plain

このように手軽なスケッチで立体的な構造を描けるので、キャンバスの種類を使い分けていくとより複雑な3Dスケッチができるようになります。

■作品の保存と書き出しについて

「Penzil」で作成した3Dモデルは、保存や書き出しも無料で可能なので合わせてご紹介しておきます。

最初にエディタ右下のオプションを開いてみましょう。

f:id:paiza:20211208103631j:plain

このオプションにある「Save」を選択すると、現在の状態をJSON形式のファイルとしてダウンロードできます。そして、同じようにオプションから「Load」を選択してダウンロードしたJSONファイルを読み込めば、続きから作業を再開できるというわけです。

「Penzil」はクラウドにデータを保存するわけではないので、3Dスケッチを保存しておきたい場合は定期的に「Save」からJSONファイルを取得しておきましょう。


また、オプションメニューの隣にあるアイコンを選択すると、さまざまな書き出しメニューが表示されます。

f:id:paiza:20211208103644j:plain

2021年12月時点では、「Blender」「Procreate」向けの書き出しに対応しているうえ、汎用性の高い「GLB」形式のファイルにも書き出すことができます。


さらに、「Make video」を選択すると、作成した3Dモデルを360度回転させるアニメーションを自動生成してくれます。

f:id:paiza:20211208103658g:plain

これらの書き出しファイルを利用して、3Dモデルのクオリティをさらに高めたり、Webコンテンツとして使ってみたりなど、さまざまな活用方法が考えられるでしょう。

とにかく「Penzil」を使うと、頭の中にあるイメージを具体的な3Dモデルに素早く落とし込むことが可能であり、書き出したファイルを活用してさらに応用させていくことができるので便利です。

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


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

このたび「Python入門編1」と「C#入門編1」が無料になりました。

PyhonとC#はどちらも人気のプログラミング言語ですので、学んでみたい・触ってみたいと思っていた方はぜひこの機会に入門編に挑戦してみてください!

paiza.hatenablog.com


また、「STEINS;GATE(シュタインズ・ゲート)」とpaizaがコラボしたプログラミングゲーム「電脳言語のオルダーソンループ」をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください!

■まとめ

今回は、誰でも簡単にスケッチ感覚で3Dモデルを作成できる無料のWebエディタをご紹介しました。

「Penzil」はまだベータ版の段階なので、これからもっと強力な機能追加などを含めたバージョンアップが行われるはずです。3Dモデルの作成にご興味ある方は、今のうちから操作に慣れておくといいかもしれません。

ぜひみなさんもオリジナルの作品を作ってシェアしてみてはいかがでしょうか。


<参考リンク>
「Penzil」公式サイト




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

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

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

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

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

paizaのおすすめコンテンツ

PPG proken プログラミングゲーム「初恋 プログラミング研究会〜海に行こうよ〜」 PPG Bingo プログラミングゲーム「コードレビューBINGO!!」
paiza転職 paiza新卒 EN:TRY paizaラーニング 記事内に記載している情報は、記事公開時点でのものとなります。 Copyright Paiza, Inc, All rights reserved.