PR
Inkscapeで窓を描くLesson

Inkscapeの3Dボックスツールでビルを描く(4)

最初の記事から読む 最後の記事を読む
この記事は最終更新日から7か月経過しています。内容が古い可能性があります。
Inkscapeの3Dボックスツールでビルを描く

前回はパスエフェクトの透視図変形でビルに窓明かりを付けました。

今回からは残りの作業をやっていきます。

前回までの作業

  1. 3Dボックスツールで3Dボックスを作成する
  2. 3Dボックスツールの軸を固定してアイソメトリック図にする
  3. 矩形ツールで窓明かりを作ってタイルクローンで増やす
  4. 3Dボックスの壁面に合わせて位置決め用の四角形を描く
  5. 窓明かりを位置決め用の四角形に合わせて調整してグループ化する
  6. パスエフェクトの透視図変形でグループを3Dボックスの壁面に合わせて変形する

3Dボックスの左壁面に窓明かりがついた状態になっています。

※説明の都合で向かって左側の広い方の壁面(ビルの正面)を左壁面、向かって右側の狭い方の壁面(ビルの側面)を右壁面と呼ぶことにします。

今回からの作業

  1. 3Dボックスの右壁面にパスエフェクトの透視図変形で窓明かりを作成する
  2. パスエフェクトの透視図変形を非表示にして窓明かりを修正する
  3. 窓明かりをレイヤーとオブジェクトダイアログから非表示に切り替えて変化を出す
  4. 3Dボックスを通常のパスに変換する
  5. ビルの壁面と屋上部分の色を変更する

もう片方の壁面に窓明かりを作る

左壁面と同様の手順で右壁面の窓明かりを作ります。

ボックスの壁面の大きさに近い四角形を作る
ボックスの壁面の大きさに近い四角形を作る
窓明かりを壁面の範囲に合わせる
窓明かりを壁面の範囲に合わせる
窓明かりを位置決め用の四角形の前面に配置する
窓明かりを位置決め用の四角形の前面に配置する
選択ツールで縦横比固定で拡大
選択ツールで縦横比固定で拡大
位置決め用の四角形からはみ出した部分を削除した
位置決め用の四角形からはみ出した部分を削除した

左壁面より横幅が狭いので数が少なくなっています。

整列と配置ダイアログで位置決め用の四角形に合わせて中央揃え
整列と配置ダイアログで位置決め用の四角形に合わせて中央揃え
パスエフェクトの透視図変形を追加して変形用ハンドルを操作する
パスエフェクトの透視図変形を追加して変形用ハンドルを操作する
ボックスの壁面に合わせて透視図変形
ボックスの壁面に合わせて透視図変形

パスエフェクト[透視図/エンベロープ]を非表示に切り替えて修正する

ここで問題が発生しました。右壁面の窓の数が、左壁面の窓の数より1階分多くなっています。

右壁面の窓の数が左壁面より1階分多い
右壁面の窓の数が左壁面より1階分多い

同じ階の部分は同じ位置に付いている場合が多いので、左右が同じ階数になるように修正します。(階段の踊り場に明かり取り窓が付いている場合もあるので位置がずれている場合もあります。)

パスエフェクトによる変形は非破壊編集なので、後から間違いに気が付いた場合でもやり直しができます。

[パスエフェクト]ダイアログから[透視図/エンベロープ]の欄の目の形のアイコンをクリックして非表示に切り替えます。

パスエフェクトの表示・非表示の切り替え(表示状態)
パスエフェクトの表示・非表示の切り替え(表示状態)
パスエフェクトの表示・非表示の切り替え(非表示状態)
パスエフェクトの表示・非表示の切り替え(非表示状態)

変形前の状態で表示されるので、グループモードに入って窓明かりを編集します。

一行分を複数選択して削除したら、選択ツールの[拡大縮小]モードで[Ctrl]キーを押しながら拡大します。

窓明かりを一行分削除した
窓明かりを一行分削除した
選択ツールで縦横比固定で拡大した
選択ツールで縦横比固定で拡大した

右壁面の窓明かりの修正が終わったら、左壁面の窓明かりの位置も調整します。

左壁面の窓明かりを調整
左壁面の窓明かりを調整

この時、左右の壁面の窓の高さが違っているのが気になる場合は[グリッド]を表示してグリッドにスナップさせて揃えたり、[整列と配置]ダイアログで揃えたりしてみてください。

今回は目分量で揃えているので実は多少ずれています。

一部のパーツを非表示に切り替えて変化を出す

窓明かりの表示と非表示を切り替えます。全部点灯させていると規則正しく並び過ぎて無機質な感じがする(ビルは生き物ではないですけど、建物の中には人がいるはずなので生活感や人の気配を感じさせたい)ので、変化を出すことで整然とし過ぎた感じを和らげます。

夜なのに全戸に明かりがついていたらそれはそれで怖い気がしますね。会社だったら全員残業中ってことですし、マンションだったらカーテンないのかって感じですからね。

(逆にサイバー系とかSF系とかの時は、無機質な感じの方が雰囲気出てかっこよく見える時もあります。)

そんな感じのことも考えつつ、全体のバランスを見ながら[レイヤーとオブジェクト]ダイアログで目のアイコンをクリックして非表示にします。

レイヤーとオブジェクトダイアログで目のアイコンをクリックして非表示(右壁面)
レイヤーとオブジェクトダイアログで目のアイコンをクリックして非表示(右壁面)
レイヤーとオブジェクトダイアログで目のアイコンをクリックして非表示(左壁面)
レイヤーとオブジェクトダイアログで目のアイコンをクリックして非表示(左壁面)

窓を削除ではなく非表示に切り替えているのは、削除してしまうと後から見返して修正したくなった時にやり直しが面倒だからです。非表示の状態で保留しておけば、この窓はやっぱり点灯させたいと思ったときに表示に切り替えるだけで対応できます。

ただ、パスが多いとSVGファイルのデータも重くなるので(当たり前ですが)、完成形のファイルでは必要のないパスは削除した方がいいです。

作業途中のファイルと完成形のファイルは別々のファイルとして保存するのがおすすめです。SVGファイルを軽くするためにやり直しが難しい状態にすると、後で大幅に修正が発生した場合、大変なことになります。

3Dボックスの特徴と注意点

窓明かりを一度非表示にして、3Dボックスだけの表示にします。

(非表示にしなくても作業自体はできるのですが、3Dボックスの面を見てもらいたいので窓明かりを非表示にしました。)

3Dボックスツールで3Dボックスをクリックした時
3Dボックスツールで3Dボックスをクリックした時

3Dボックスの構造について

3Dボックスは長方形の6つの面から構成された直方体(直六面体)です。要するに箱型です。

3Dボックスを作成すると自動的に面のパス6個をグループ化した状態のシェイプ(基本図形)1個が作成されます。

[レイヤーとオブジェクト]ダイアログから面のパスを選択すれば面のフィルやストロークの設定を変更することができます。

3Dボックスは[オブジェクトをパスへ]で通常のパスに変換するまでは、シェイプとして操作できます。

[3Dボックスツール]で既に作成されている3Dボックスをクリックすると、[リサイズハンドル]や[透視図内移動ハンドル]、[X軸・Y軸・Z軸]が表示されます。

3Dボックスはシェイプなので、作成後でも3Dボックスツールに切り替えれば、設定した軸や遠近線に沿ったサイズ変更や移動ができます。

シェイプであれば3Dボックスの形を調整する時に楽なので、形が確定するまでは3Dボックスのシェイプのままで置いておいたほうが扱いやすいです。

3Dボックスを別ファイルに貼り付けると座標がずれる件

便利な3Dボックスですが、少し困ったことがあります。

部品を別々のファイルで作って他のファイルにコピーペーストして利用しようとした場合、3Dボックスのままだと貼り付け後に座標がずれてしまいます。

バグなのか仕様なのか分からないので説明が難しいですが、こんな感じでバラバラ事件になります。(Inkscape 1.32)

([オブジェクトをパスへ]で3Dボックスを通常のパスに変換した後でならバラバラ事件は発生しないです。)

3Dボックスを他のファイルにコピーペーストした時
3Dボックスを他のファイルにコピーペーストした時
通常のパスに変換したボックスはコピーペーストしても問題ない
通常のパスに変換したボックスはコピーペーストしても問題ない

この例の時は、3Dボックスを含まないファイルからコピーして、3Dボックスを含むファイルの方に貼り付ければバラバラ事件は発生しません。

3Dボックスを含まないファイルからコピーペースト
3Dボックスを含まないファイルからコピーペースト

3Dボックスのままの方が他のパーツと合わせた時の調整が楽なので完成形のファイルになるまでは[オブジェクトをパスへ]で変換しないで保留した方がいいです。

3Dボックスを通常のパスに変換する

3Dボックスをシェイプから通常のパスにしたい場合は[メニューバー>パス>オブジェクトをパスへ]で変換できます。

変換後は3Dボックスツールのハンドルや軸は表示されなくなります。

つまり、3Dボックスとしての調整はできなくなったので、調整する場合は選択ツールやノードツールを使用する必要があります。

メニューバー>パス>オブジェクトをパスへ
メニューバー>パス>オブジェクトをパスへ
変換後は3Dボックスツールのハンドルや軸は表示されない
変換後は3Dボックスツールのハンドルや軸は表示されない

[レイヤーとオブジェクト]ダイアログで確認すると、ボックスの6つの面がまとまったグループになっています。

変換後は6つの面がグループ化された通常パス
変換後は6つの面がグループ化された通常パス
前面のパスを非表示に切り替えると背面のパスが見える(1)
前面のパスを非表示に切り替えると背面のパスが見える(1)
前面のパスを非表示に切り替えると背面のパスが見える(2)
前面のパスを非表示に切り替えると背面のパスが見える(2)

見えない面は使う予定がなければ削除して構いません。

前面に隠れて見えなかった背面(1)
前面に隠れて見えなかった背面(1)
前面に隠れて見えなかった背面(2)
前面に隠れて見えなかった背面(2)
前面に隠れて見えなかった背面(3)
前面に隠れて見えなかった背面(3)

壁面の色を変更する

[レイヤーとオブジェクト]ダイアログから壁面のパスを選択し、カラーパレットをクリックしてフィルの色を変更しました。

動画では3Dボックスを通常パスに変換した後に色変更していますが、3Dボックスのシェイプのままでも[レイヤーとオブジェクト]から選択すれば変更は可能です。

壁面の色を変更した
壁面の色を変更した

非表示にしていた窓明かりのグループを表示します。

窓明かりのグループを再表示
窓明かりのグループを再表示

動画では位置決め用の四角形(整列用の長方形)も非表示にしていますが、実は問題があったのでその件について説明します。

位置決め用の四角形を非表示
位置決め用の四角形を非表示

パスエフェクト[透視図/エンベロープ]の注意点

パスエフェクト[透視図/エンベロープ]を設定後、設定したグループに属するオブジェクトを非表示にすると、再度選択した時に、表示状態のオブジェクトのみに変形がかかってしまいます。(Inkscape 1.32)

一部を非表示にすると再選択時に表示状態のオブジェクトのみに変形がかかる
一部を非表示にすると再選択時に表示状態のオブジェクトのみに変形がかかる
非表示だがオブジェクト自体は存在している
非表示だがオブジェクト自体は存在している
表示に切り替えるとこうなる
表示に切り替えるとこうなる
パスエフェクトを非表示に切り替える
パスエフェクトを非表示に切り替える
パスエフェクトを表示に切り替える
パスエフェクトを表示に切り替える

なんで?って感じですけど、仕様なのかバグなのか私にもよくわかりません。

壁面の色を変えたい場合は位置決め用の四角形の色を変更した方が良さそうです。

(もしくはパスエフェクト[透視図/エンベロープ]を[オブジェクトをパスへ]か[パスに戻す]で通常のパスに変換した後に、位置決め用の四角形を削除して土台のボックスを見せるようしてもいいです。この場合だとパス自体が変形するのでやり直しができなくなります。)

作業の内容としては難しいことはないと思うのですが、文章で説明したら長くなってしまいました。

パスエフェクトの透視図変形を使うと一見難しそうに感じる壁面への貼り付けも簡単にできるので、ぜひ使ってみてくださいね。

透視図変形で貼り付けるだけだとのっぺりしていて立体感がないな、もう少し立体感のあるアイソメトリック図を描いてみたいなという人向けに……とても便利な[結晶軸グリッド](Axonometric Grid)というのもあるんですが、その件についてはまた別の機会があれば説明しますね。

まだその別の機会がいつになるか未定なので、もっと立体的なアイソメ図を描くのにお役に立ちそうなサイトや動画をご紹介しておきます。

Inkscapeを使ったアイソメトリック図の描き方はこちらのサイトが参考になります。

アイソメトリックでいろいろ描いてみる – やってみよう!ベクター画像

結晶軸グリッドについてはこちらのサイトが参考になります。

InkscapeでDesign- グリッド線を引く

InkscapeでDesign- グリッド線を引く
フリーのドロー系ソフトInkscapeの使い方。グリッド線の作成・編集方法のご紹介です。

結晶軸グリッドを使ったアイソメトリック図の描き方についてはこちらの動画がわかりやすいです。(操作を見るだけで何となく分かると思います。)

次回はビルを夜空と窓と合わせて位置調整してみましょう。

タイトルとURLをコピーしました