モーリーのメモ

アプリ開発等(プログラミング、CG作成)、興味を持ったことを実践してまとめるブログです。

モーリーのメモ

パネルを作る その1 - 形状の作成:Blender

<今回やること!>

  • Blenderで、立体的なパネルの画像を作成します。アプリのUI等に使用できます。
    f:id:mmorley:20160101100025p:plain
 
 Inkscapeでも、このようなパネルを作成することが出来ますが、複雑な形状を立体的に作るのは難しいです。
 Blenderであれば、もっと複雑な形状も作成することが出来ます。
 
 以降で、詳しいやり方を説明します。
 簡単な形状なので、Blenderを初めて触る人が、雰囲気を掴むには良いかもしれません。

使用環境

作成手順

 『3D View』の設定や操作については下記の記事も参照下さい。
  *テンキーがないノートPC等の場合のショートカットのキー割り当てについても説明しています。

Blenderの起動と『3D View』の操作

  1. Blenderの起動
  2. 『3D View』を下記のように設定
     *ショートカットキーを使う際は、マウスポインタが操作対象のウインドウ内にあることを確認してください。
    • キーボードの『7』を押下し、Top View(上面図)に設定
    • キーボードの『5』を押下し、平行投影(パースなし)に設定
  3. スナップモードを下記のように設定
    f:id:mmorley:20160101143213p:plain
    • 画面下部の磁石のアイコンをクリック(『shift』 + 『tab』)し、スナップモードを有効化(頂点を編集する際にグリッドに吸着)
    • 格子のアイコン(Absolute grid alignment)もクリックして有効化(オブジェクトの中心がグリッドに従って移動)

最初から置かれているCube(立方体)を削除

  1. Cube(立方体)を右クリックで選択

    補足 オブジェクトの選択は右クリックです。

  2. キーボードの『x』を押下して、『Delete』をクリック

カーソルを原点に移動

  1. キーボードの『shift + s』を押下して、『Cursor to Center』をクリック

    補足 カーソル位置の移動は左クリックでも可能です。
    ここではスナップ機能で正確な位置にカーソルを置きます。

Plane(平面)を配置

  1. キーボードの『shift + a』を押下して、『Mesh』-『Plane』をクリック

    補足 カーソルの位置にPlaneが配置されます。

Planeを長方形にする

  1. キーボードの『s』を押下して、拡大縮小を開始
  2. キーボードの『x』を押下して、拡大縮小をX方向に限定
  3. マウスをドラッグしてX方向に3倍に拡大し、左クリックで決定(キャンセルは右クリック)
  4. キーボードの『control + a』を押下し、『Scale』をクリックして拡大縮小を"適用"

    補足 "適用"の操作は重要です。
    "適用"していないと次に行うBevel等の結果が変わります。

    f:id:mmorley:20160104143017p:plain

Planeを面取りする

 せっかくなので、長方形ではなく形状を少し複雑にしてみます。

  1. Blenderの画面右側の『Properties』ウインドウの『Modifiers』タブをクリック
  2. 『Add Modifiers』-『Bevel』をクリック
    f:id:mmorley:20160104145142p:plain
  3. Bevelの設定で、『Only Vertices』にチェックを入れ、『Apply』をクリック
    • 『Width』の値で、面取りのサイズを変更出来ます。
    • 『Segments』の値を大きくすると、近似的な角丸になります。
    f:id:mmorley:20160104151603p:plain

Curveに変換

 後で行う処理のためにオブジェクトをCurveに変換します。

  1. キーボードの『option + c』を押下して、『Curve from Mesh/Text』をクリック

Planeの追加

  1. 左クリックで、今あるPlaneと重ならない位置にカーソルを移動
  2. キーボードの『shift + a』を押下して、『Mesh』-『Plane』をクリック
  3. キーボードの『s』を押下して、拡大縮小を開始
  4. マウスをドラッグして1個目のPlaneサイズを小さく(0.1倍)し、左クリックで決定
    f:id:mmorley:20160104153459p:plain

    補足 3DViewの表示の拡大縮小は『ホイールスクロール』です。
    3DViewの視点の移動は、『shift + 中ボタン(ホイール)ドラッグ』です。

追加したPlaneを三角形にする

 *三角形の向きに注意して下さい。

  1. 追加したPlaneを右クリックで選択
  2. キーボードの『tab』を押下して、エディットモードにする
  3. キーボードの『a』を押下して、選択を解除
  4. 右上の頂点を右クリックで選択
    f:id:mmorley:20160104161200p:plain
  5. キーボードの『x』を押下して、『Vertices』をクリックして頂点を削除
  6. キーボードの『a』を押下して、全ての頂点を選択
  7. キーボードの『f』を押下して、三角形に面を貼る
    f:id:mmorley:20160104204154p:plain
  8. キーボードの『tab』を押下して、オブジェクトモードにする

    補足 オブジェクトモード・・・オブジェクト単位での編集
    エディットモード・・・1つのオブジェクトの点・辺・面を編集

三角形のPlaneをCurveに変換

  1. キーボードの『option + c』を押下して、『Curve from Mesh/Text』をクリック

Curveに沿って掃引

  1. 最初に作った六角形のCurveを右クリックで選択
  2. 『Properties』ウインドウの『Data』タブをクリック
  3. 『Geometry』-『Bevel Object』をクリックして、『Plane.001(三角形のCurve)』を選択
    f:id:mmorley:20181207170558p:plain
  4. キーボードの『option + c』を押下して、『Mesh from Curve/Meta/Surf/Text』をクリック
    f:id:mmorley:20160105105826p:plain

    補足 三角形を断面形状にして、六角形に沿ってぐるっと引き伸ばした形状です。
    『option + c』でMeshにする前に、三角形の形状やサイズを修正すると最終
    形状に即反映されるので形を見ながら調整できます。

面を貼る

  1. キーボードの『tab』を押下して、エディットモードにする
  2. キーボードの『c』を押下して、サークル選択を開始
  3. マウスのホイールスクロールで、円の大きさを調整する
  4. マウスの左ボタンドラッグで頂点をなぞって下図のように選択し、右クリックで終了
    f:id:mmorley:20160105111230p:plain
  5. キーボードの『f』を押下して、面を貼る
  6. キーボードの『tab』を押下して、オブジェクトモードにする
    f:id:mmorley:20160105111644p:plain

    補足 頂点を複数選択する方法はいくつかありますが、ここではサークル選択を
    してみました。
    単純に複数選択する場合は、2個目の頂点からキーボードの『shift』を押し
    ながらクリックします。
    選択をやり直す場合は、キーボードの『a』で解除します。
    キーボードの『a』は、押すごとに全て選択と解除を交互に行います。

三角形のCurveを削除

  1. 三角形のCurveを右クリックして選択
  2. キーボードの『x』を押下して、『Delete』をクリック
 
形状の作成は以上です。
画像ファイルへの出力については、次の記事で説明します。
mmorley.hatenablog.com

今回の成果物

 作成したBlenderファイルです。

 リンク先のページ内の『Raw』を右クリックして、『リンク先を別名で保存』をクリックするとダウンロードできます。

あとがき

 多機能なソフトなので、同じ形状でも作り方や操作方法はいろいろな方法があります。
 本記事では、キーボードのショートカットによる操作をメインにしました。どのモードで何を選択しているか等で、操作メニューが変わるので把握するのは大変ですね。