LIFULL Creators Blog

LIFULL Creators Blogとは、株式会社LIFULLの社員が記事を共有するブログです。自分の役立つ経験や知識を広めることで世界をもっとFULLにしていきます。

デザイナーの3Dモデル作り「準備編」

f:id:LIFULL-kobayamu:20170906133858p:plain

こんにちは。 LIFULL HOME'Sアプリのデザイナーのこばやしです。

2017年9月にiOS ARKitを使った新機能「ARお部屋計測」をリリースしました。
この機能は「カメラをかざすとホームズくんが出現して、走ってお部屋を計測」してくれます。ここで登場するホームズくんの3Dモデルを作成しました。

www.lifull.blog
iOS ARKit・Android ARCoreの技術により、AR/VR対応の端末・アプリが増えていくことを考えると、デザイナーがモデリングをする機会が増えてくると思い、私と同じく3Dモデリングをしたことがないデザイナー向けに調べたコト・苦労したコトをまとめました。
全3編の構成で、1編目は「準備編」です。

はじめに

私は「習うより慣れろタイプ」です。そのため、初歩的な内容の記事になりますが、3Dモデリングの初心者入門として読んでいただければ幸いです。

3Dモデルの役割

「ARお部屋計測」では、アテンドとして3Dホームズくんが登場します。3Dモデルを用いることにより、世界観の演出に効果があり、情報をエモーショナルに伝えることができ、表現に広がりを与えてくれます。
iOSのLIFULL HOME'Sアプリで実際にご覧いただけます。

LIFULL HOME'S(ライフルホームズ)

LIFULL HOME'S(ライフルホームズ)

  • LIFULL Co., Ltd
  • ナビゲーション
  • 無料

モデリングのツール

今回はBlenderというツールを使用しました。Blenderはオープンソースの3DCG制作ツールです。 https://blender.jp/

理由

  • 無料。(開発規模によってライセンスは要確認です)

  • ARKitやUnityとの相性がよい。

操作が独特

「何かオブジェクトを選択する」「手のひらツールのように画面を動かす」などの慣れ親しんだ操作が、Blenderでは異なる操作になります。とりあえず触ってみる自分のようなタイプの人間が最初に困惑するポイントだと思うので、基本操作をIllustratorと比較してみます。

オブジェクトの選択

Illustrator:左クリック
Blender:クリック
右クリックはプロパティという固定観念。

視点を移動する(手のひらツール的な動き)

Illustrator:space+左クリック&ドラッグ
Blender:Shift+ホイール押し込み&ドラッグ
ホイールを押し込むという発想。

視点のズーム

Illustrator:option+ホイール
Blender:ホイール
これはわかりやすい。

f:id:LIFULL-kobayamu:20170906105003p:plain

AdobeソフトとBlenderを往復して作業しているときは誤操作ばかりしていました。そして「視点操作」は、マウスホイールを頻繁に使用しますので、ホイール付きマウスでの作業をお勧めします。

視点移動のショートカット

オブジェクトを各方面から確認するためのショートカットです。よく使う機能なので覚えておくと便利です。
f:id:LIFULL-kobayamu:20170904100421p:plain
「1キー」正面から
「1キー+ctrl」背面から
「3キー」右面から
「3キー+ctrl」左面から
「7キー」頭上から
他にも、各軸に15度づつ回転、設置したカメラビュー表示などテンキーで操作できます。

モデリングの準備

作業がしやすい画面分割

3Dなので色々な角度でオブジェクトを確認します。主に作業するメインビューと、上からと横からの固定ビューを常に開いて操作していました。作業しながら自分なりによく使う画面を分割表示しておくと作業が捗るかと思います。

f:id:LIFULL-kobayamu:20170901182955p:plain

下絵を配置する

ホームズくんがモデルなので、形状は頭に入っていますが、細かいパーツのバランスなどを感覚で作っていくのは難しいので、3Dモデルの下絵を準備し設置します。

f:id:LIFULL-kobayamu:20170901164719p:plain

  1. 3D View上で「N」キーを押して「プロパティパネル」を表示

  2. 「下絵(Background Images)」をチェック

  3. 絵を配置する方向、配置するフォーマットを指定

  4. 下絵を開くと表示

各画面毎に設定が可能なので、正面・横・頭上・背面からの下絵を準備できると作りやすいです。

f:id:LIFULL-kobayamu:20170901153935p:plain

今回はモデル作りの前提と実際にメッシュオブジェクトに触れる前工程で調べたコトをまとめました。次回は具体的に3Dモデリング時の便利機能などをまとめようと思います。

つづく