Blenderを使用した3Dモデリングの「初級編」です。
なにごとも、始めるときは「Hellow,World」から始めるように、Blenderを触り始めるうえで非常に簡単な本のモデリングをから始めたいと思います。
Blenderについては、たまに触っては、一定期間触らないを繰り返して毎度完全に操作を忘れるので、自分用に手順を備忘録的に書き残しておきます。
「閉じている本」モデル完成品
下のような「閉じている本」のモデリングを行います。
360°すべての視点から見てみてください。
作成に使用した環境
使用したBlenderの版数は以下です。
Commit Time「27 Jun 23, 08:08」
英語設定を基準にして以下手順を説明します。
Blender Launcherを使うと、バージョン管理など比較的に楽に行うことができます。
Blender基本操作・モード説明
今回用いる機能について以下にまとめています。操作で分からないことが出てきたら、ここに戻って来てみてください。
軸の説明
- Z軸：縦軸
- X軸：平面軸
- Y軸：平面軸
変更の取り消し
- 「Ctrl」+「Z」：一つ前の状態に戻す。変更を元に戻す。
- 「Ctrl」+「Shift」+「Z」：一つ先の状態に戻す。（Ctrl＋Zの逆）
上部のバー「Edit」→「Preference」→「System」から、操作を記憶しておける回数を増やすことが可能です。
モデル作成時の視点変更
- 「マウスホイール」+ドラッグ：視点中心を支点として360°視点変更
- 「Shift」+「マウスホイール」＋ドラッグ：視点中心を変更
- マウスホイール：拡大縮小
- 「テンキー0」：カメラ視点
- 「テンキー1」：正面(y軸)
- 「テンキー3」：正面(x軸)
- 「テンキー7」：正面(z軸：見下ろし視点)
- 「テンキー5」：投影方法切替え（透視投影/平行投影）
- 「Numpad」（テンキー真中上"/"）：視点の中心に選択オブジェクト
- 「Shift」+「C」：視点とビューポート原点（赤白のターゲット）初期化
オブジェクトの変形
- 「S」：マウスによるサイズ変形
- 「G」：辺、面、点を選択した状態で変形
辺・面・頂点の追加
- 「Ctrl」+「R」：ループカット
- 「Ⅰ」：面を内側へ差し込み
その他の操作一覧
オブジェクトモード
- 「Ctlr」+「A」→「All Transforms」：オブジェクト変換情報をリセット
各モードの説明
＜Object interaction Mode＞
- Object Mode：オブジェクトの追加や変形
- Edit Mode：各オブジェクトの編集
- Vertex Select：頂点選択モード「1」で切り替え
- Edge Select：辺選択モード「2」で切り替え
- Face Select：面選択モード「3」で切り替え
- Propotional Editing Mode：選択した辺、点、面を起点に減衰しながら周囲を追従移動「O」で切り替え
Blenderを用いた本作成手順
以下で制作までの過程を示します。
1. Blenderを開いた初期状態
以下がBlenderを開いた時の初期状態です。ここから手順を示します。
- モード情報（左上）「Object Mode」
2. 本全体の縦横比、厚さを決める
初期から配置されているデフォルトのキューブをそのまま使っていきます。
2.1. キューブを選択
2.2. Z軸方向にキューブを拡大縮小する
- 「S」キー +「Z」キー
- 「S」キー +「Y」キー
もしくは、右にあるオレンジの四角アイコン「Object」→「Transform」→「Scale」から、Cubeを選択した状態で数値を指定することで変形可能です。
（参考値：X：1.0, Y：1.4, Z：0.25）
3. 本の背表紙を作る
3.1. 編集モード（Edit Mode）に切り替え
- 「Tab」：編集モード（Edit Mode）へ切り替え
- 左上の表示で切り替わったことを確認（下図赤囲箇所）
本棚に並べた時の正面となる本の背表紙が、平面だと味気ないので丸みを持たせていきます。背表紙を中心から膨らませるように変形していきます。
これには、ループカットという機能を使用します。
名前の通り、オブジェクト一周をぐるりと囲うように辺が作られます。この操作によって、オブジェクトに辺と面を増やすことができます。
3.2. ループカットを行う箇所場所を選択する
- 「Ctrl」+「R」：ループカット選択モード
- 背表紙を含め本の側面を一周するような場所にループカットのカーソル（辺）を合わせる
左側のアイコンから、「Loop Cut」を選択しても良いです。
3.3. ループカットする辺の数を決める
- マウスホイールを用いて、ループカットする辺を増減可能
今回は、辺が5つになるようにしています。
「クリック」で位置を決定するモードに移行、もう一度「クリック」で位置の決定を行います。
一度目のクリックの位置からループカット位置をずらしたくないときは、2回目は「右クリック」することで確実に均等な位置に辺の位置が決まります。
次に辺の移動を行い、背表紙を形作っていきます。
- Edit Modeのまま「2」キーでEdge Selectモード（辺選択）へ切り替え
- 真ん中の辺を一つ選択する
3.6. Proportional Editingモードへ切り替える
- 「O」：Proportional Editingモード切替
- View Window画面中央上部の二重丸のようなアイコンが選択されていることを確認
- プロポーショナル編集モードのまま、「G」キーで移動する
- 「G」 +「X」：X軸方向に辺を移動させる
- Propotional Editing Mode：選択した辺、点、面を起点に減衰しながら周囲を追従移動
POINT！プロポーショナルとは、比例関係という意味で、「均整のとれた」などの意味があります。マウスのホイールで追従移動の影響する範囲を示す円の大きさを変えることができます。
4. 本の紙の束部分（小口/天）を作る
実際にページに当たる部分と本の表面部分の境目を作っていきます。具体的にはページ部分と表紙、裏表紙、背表紙との間に存在する段差部分です。4.1. 面選択モード（Face Select）へ切り替える
- 「3」：面選択モードへ切り替え
- 左上のモード切替から面モード（Face Select）選択
- マウスでクリック、まとめて選択する場合はドラッグすることで、面を選択
- 紙の束になる3面すべてを選択した状態にする
4.3. 選択している面を内側に差し込む
- 「Ⅰ」：マウスを移動させることで、面の内側に選択面を差し込む
選択面を移動することで、新たな辺が追加され、それにより面が追加されました。
ここまでで、本を覆っている表紙、背表紙、裏表紙部分と、本のページの紙束部分に面がおおよそ分けられたと思います。
4.4. 微修正
背表紙や表紙部分など、まとめて辺を差し込んだことで厚みがイメージと異なるものになっているかもしれません。
今回は、表/裏表紙の厚さが適切になるところまで、面を差し込んだため、背表紙の厚みに違和感が出てしまいました。その点を修正していきます。
4.5. 辺選択（Edge Select）モードへ切り替え
- 「2」：辺選択モードへ切り替え
- 左上のモード切替から辺選択（Edge Select）を選択
- 背表紙の厚みに当たる内側の6辺を選択
- 「Shift」+「Ctrl」+「クリック」：複数選択＋投げ縄選択
上下分の辺を選択するには、どちらか一方の辺を選択した状態で、カメラの視点をきりかえ、もう一方の辺を「Shift」を押しながら選択することで、複数選択可能です。
4.7. 辺の移動モードを切り替え
先ほどまでの編集の名残で、辺の移動がプロポーショナル編集モードとなっている場合、変更したときと同じ「O」キーで、プロポーショナル編集モードを解除します。
4.8. 選択した辺の移動
- 「G」 + 「X」：X軸方向に辺を移動
次にページとなる部分と、表紙部分に段差を付けていきます。
- 先ほど「i」キーで内側に差し込んだ面部分だけを選択
選択する際には、クリックもしくは、ドラッグで「Shift」を押しながら選択することで、複数選択可能です。3面分すべて選択して、選択された面がオレンジになっていることを確認します。
4.10. 面の押し出し、引き込み
- 面を選択した状態で「Alt」+「E」
Extrude（押し出し）のメニューが表示されるので、「Extrude Face Along Normals」（領域を法線方向に押し出し）を選択します。
選択した面を表紙部分に比べ、内側に引き込みます。
何もクリックしていない状態で、マウスを上下させると、それぞれの面が平面の向いている方向にオブジェクトとしてのバランスを保ちながら移動することが分かります。
表紙とページの間の段差を考えてバランスの良い位置で「左クリック」することで決定します。3面とも内側方向に押し出せていることを確認します。
Note！単純に「E」キーを押す、もしくはExtrude Face（面の押し出し）は、同じ方向を向いている面だけの選択には適用可能ですが、異なる方向を向いている面を選択していると、今回の意図通りには押し出しできません。
ここまでで、かなり目標の本の形になっていると思います。5. 角を滑らかにする
全ての角が鋭利なので、角が滑らかになるように微修正していきます。
5.1. 辺モード（Edge Select）へ切り替え
- 「2」：辺選択モード（Edge Select）へ切り替え
- 左上モード切替から辺選択（Edge Select）を選択
- 「Shift」+「Alt」+「クリック」：囲われた箇所の辺を全て選択
5.3. 選択した辺にベベル（面取り）をかけていく
- 「Ctlr」+「B」：辺の内側が拡張され面が追加（ベベル）
- 「マウスホイール」：追加する面/辺の数を調整
現状以下のようにベベルが掛かるはずです。
5.3.1. 「適用」を行い、ベベルを均等にかける
オブジェクトのスケール（拡大、縮小）をおこなうと、X/Y/Z軸の比率のずれが起こります。そのため、オブジェクトのベベル幅は一定にはなりません。そこで、次のようにオブジェクトに適用（初期化処理のようなもの）を行う必要があります。
- 「Tab」：Object Modeへ切り替え
- 「Ctrl」+「A」：Apply（適用）メニューを開く
- 「All Transforms」（全トランスフォーム）を選択
POINT！ベベル操作はエッジや面の向きなどを基準として、ベベルサイズや、形状が決定されます。また、オブジェクトがスケール（サイズ変更）された場合、ベベルサイズもスケールされます。そのため、今回の場合も、立方体からサイズや形状を変更したため、ベベルが期待したようにかからない場合があります。ベベル操作を行う前にオブジェクトの変換情報をリセットして、正規化することで、一貫性のあるベベル操作を実現します。
より詳しい、適用についての説明は以下などが参考になりました。▶https://cgbox.jp/2021/12/21/blender-apply/
5.4. 本の背表紙を滑らかにする
- 「Tab」：Object Modeへ切り替え
- 左上モード切替からObject Modeを選択
- View Window上で右クリック
- 「Object Context Munu」（オブジェクトコンテクストメニュー）が表示される
- 「Shade Smooth」（スムーズシェード）をクリック
5.5. 角のなめらかさの調整
本の背表紙が滑らかになりましたが、本の角など、全体的に角ばってほしくないところまで滑らかになってしまいメリハリがなくなったので、調整します。
- 右側の緑色逆三角形のアイコン「Data」（Object Data Properties）
- 「▶Normals」（法線）
- 「Auto Smooth」（自動スムーズ）のチェックをON
POINT！「Auto Smooth」を設定していない状態では、オブジェクト全体にスムーズシェード（Shade Smooth=滑らかに反射）が掛かっている状態ですが、「Auto Smooth」にチェックを入れることで、一方の面を基準として平面とみたとき、もう一方の面がその面より一定角度（初期は30°）以上傾いていれば、フラットシェード（鮮明なエッジ）、一定角度より差が無ければスムーズシェード（滑らかな局面）が掛かった状態となります。
この角度あたりの話についてはどこを調べても分かりにくいのですが、以下がかなり参考になったので見てみてください。▶https://note.com/suzuumi/n/ndfe3306be8cb
ここまでで、本の背表紙部分は、なめらかに、角ばってほしい箇所はそのまま表現されました。
6. 本に凹凸による装飾をする
本の形はできたので、装飾を行っていきます。上記までの編集方法を用いて、お好みで装飾を行ってください。以下は操作の一例です。
6.1. 編集モードへの切り替え
- 「Tab」：Edit Modeへ切り替え
- 「3」：Face Select（面選択）へ切り替え
- 表紙の面を選択
- 「Ⅰ」：面を内側に差し込む
- 「S」+「Y」：Y軸方向の面の大きさを調整
- 「Ｓ」+「Ｘ」：Ｘ軸方向の面の大きさを調整
- 「G」 +「Y」：Ｙ軸方向に面を移動
- 「E」：面の押し出し/押し込み
- もしくは「Alt」+「E」→Extrude Face（面の押し出し）
7. 色を付ける
作成したモデルに簡単に色を付けていきます。7.1. ベースカラーを付ける
- 「Z」：「Material Preview」（マテリアルプレビュー）を選択
- 作成した本のモデルを選択
- 右側赤い丸アイコン「Material」（Material Properties）→「Base Color」
- カラーパレットから色を選択
7.2. ページ部分の紙の色を変える
- 「Tab」：編集モード（Edit Mode）へ切り替え
- 「3」：面選択モード（Face Select）へ切り替え
- ページ部分の面を全て選択
7.3. Materialの追加
- Material PropertiesにあるMaterial一覧から右側の「＋」ボタンをクリック
- 「New」（新規）をクリック→新しいマテリアルが追加
- 「ベースカラー」を上と同じくカラーパレットから選択
- Material Properties内のマテリアルを選択した状態で「Assign」をクリック
- マテリアルの色が選択している面に割り当てられる
9. しおりを作る
必要に応じて装飾を追加していきます。完成した画像は本記事末尾にあります。
- 本を選択
- 「Tab」：編集モード（Edit Mode）に切り替え
- 「3」：面選択モード（Face Select）に切り替え
- ページ部分の面を一つ選択
- 「Ⅰ」：面を内側に差し込む
- 「S」：面のサイズを変更
- 「G」：面を移動
- 「E」：しおりとなる面を外側に押し出す
9.1. しおりの造形を整える
- 「1」：頂点選択モード（Vertex Select）に切り替え
- しおりの先端、4つの頂点を選択した状態で、右クリック
- 「Vertex Context Menu」→「Subdivide」（細分化）を選択
- 新しくできた中心の3つの頂点を縦に選択
- 「G」+「Y」：Y軸方向に頂点を移動
8. 本の複製と配置
- 「Tab」：オブジェクトモード（Object Mode）に切り替え
- 「テンキー1」：カメラ移動
- オブジェクトを選択
- 「Shift」+「Ｄ」：オブジェクトを複製
- マウスを動かすとオブジェクトが追従
- +「Z」：Z軸上（縦方向）にオブジェクトを移動
- +「X」：X軸上（平面方向）にオブジェクトを移動
- +「Y」：Y軸上（平面方向）にオブジェクトを移動
- 「R」：オブジェクトの回転
- +「Z」：Z軸上（縦方向）にオブジェクトを回転
- +「X」：X軸上（平面方向）にオブジェクトを回転
- +「Y」：Y軸上（平面方向）にオブジェクトを回転
WebGL（Three.js）を用いた本の描画
Three.jsを用いて、上で作成したモデルをブラウザ上で描画します。
実際に描画した例は以下です。
▼Exportしたモデルの描画
▼作成したモデルの表示例
参考：
