2Dデザイナーが生き残りをかけた3D超入門！【Maya2016~2017】

**2Dデザイナーが生き残りをかけて、死にそうになりながら3D(Maya)を覚えました（大げさな！）。当時は初心者でしたが経験的には今は2年目。この記事は2年前の記事ですが、初心者同然の私が「順序に従えば誰でも作れる！」を目指して書いたものに、今の知識で少々手直ししております**

# 簡単に頭に入れておきたいこと
## よく使うショートカット
`W`移動
`E`回転
`R`拡大縮小
`Q`選択を解除する
`F`選択したオブジェクトにズーム

## ポリゴンの構成要素
* ポリゴンを形作る要素は、頂点、エッジ、フェース！
* ![ポリゴん.jpg](https://qiita-image-store.s3.amazonaws.com/0/45208/0ce43932-34cc-9ec8-54fa-1f1f8f763108.jpeg "ポリゴん.jpg")


## 編集要素
* ピボットはオブジェクトの移動や回転、拡大縮小などを行う際の基軸
* ![スクリーンショット 2016-07-14 1.01.59-1.jpg](https://qiita-image-store.s3.amazonaws.com/0/45208/c908164c-3c38-499e-28c9-2c30131fd49e.jpeg "スクリーンショット 2016-07-14 1.01.59-1.jpg")
* ピボットを中心に移動や回転や拡大縮小する際の表示
* ![wer.jpg](https://qiita-image-store.s3.amazonaws.com/0/45208/d1b221d7-743d-f273-9bc1-5e3c1e66c373.jpeg "wer.jpg")


# モデリング

## イメージの作成
モデリングする前に作りたいもののイメージを固めよう！
![mode1.png](https://qiita-image-store.s3.amazonaws.com/0/45208/53b037fd-f0d1-4e1d-95ec-3ef7781712ba.png)


* 風船の丸い部分を作る
    * ![mode2.jpeg](https://qiita-image-store.s3.amazonaws.com/0/45208/a36822d3-0fd1-14fa-9616-d838661640c2.jpeg)
    * ![mode3.jpeg](https://qiita-image-store.s3.amazonaws.com/0/45208/72f23692-36c2-27a4-53f7-ea99ed46b691.jpeg)
        * スムースを選ぶ手段は他にも、モデリングツールや上部メニュー内からも選べる
    * 分割2にするとこの形状になる
    * ![分割2.png](https://qiita-image-store.s3.amazonaws.com/0/45208/e779d7db-d09a-7d44-6ba1-e1dcd7deec8b.png)
* 面を押し出して耳を作る
    * ![mode4.jpeg](https://qiita-image-store.s3.amazonaws.com/0/45208/73367544-31dc-ab7a-a002-149965e875d9.jpeg)
    * ![mode5.jpeg](https://qiita-image-store.s3.amazonaws.com/0/45208/69fda4da-8096-2b6d-167c-6475a2e4cf1f.jpeg)
    * ![頂点エッジ-2.jpg](https://qiita-image-store.s3.amazonaws.com/0/45208/95d0344e-bb8c-d393-77cb-4055077d49e0.jpeg)
    * ![mode8.jpeg](https://qiita-image-store.s3.amazonaws.com/0/45208/9a9c149d-16d2-f400-51a9-e6c359971990.jpeg)
* 左右対称のものはシンメトリで作業をする
    * ![mode7.jpeg](https://qiita-image-store.s3.amazonaws.com/0/45208/d4a1f920-d574-86c8-72cd-ecf1cb85db29.jpeg)
    * オブジェクトXやワールド軸上で対称的ならワールドXでも大丈夫
* 風船の下の方を作る
    * ![mode9.jpeg](https://qiita-image-store.s3.amazonaws.com/0/45208/59fe649e-600f-e670-1871-1f2a7418d0e6.jpeg)
    * ![円錐.jpg](https://qiita-image-store.s3.amazonaws.com/0/45208/fd3e0c67-a52b-d57e-a296-0de0c7d5e7da.jpeg)
* ヒモを作る
    * ![円柱.jpg](https://qiita-image-store.s3.amazonaws.com/0/45208/a712bf28-7b84-cbee-49d2-02e032c76053.jpeg)
    * ![スケール調整.jpg](https://qiita-image-store.s3.amazonaws.com/0/45208/28fdf762-dad6-c231-ccc0-1e18afd8da25.jpeg)
* 4方向で確認してみる
    * ![4方向-1.jpg](https://qiita-image-store.s3.amazonaws.com/0/45208/e27a60cd-d887-1c80-21f6-c8264ded564d.jpeg)
    * 左のツール内のボタンを押してもいいし、スペースを押しても4画面になる
* ヒストリーの削除
    * ![mode16.jpeg](https://qiita-image-store.s3.amazonaws.com/0/45208/14e9bbbe-df75-6d35-9354-72208d5126b6.jpeg)
    * ヒストリーは作業をするたびに増えていきデータを圧迫したり、前の作業の影響でモデリングに不具合が生じたりするので定期的に削除する
* カクカクしたものを丸くする
    * エッジを選択した状態で`メッシュの編集/ソフトエッジ`か`shift+右クリック/ソフトエッジハードエッジ/ソフトエッジ`を選択
    * ![エッジ.jpg](https://qiita-image-store.s3.amazonaws.com/0/45208/235209e2-a237-6cdb-1c7b-dd6221e76003.jpeg)![ソフトエッジ.jpg](https://qiita-image-store.s3.amazonaws.com/0/45208/a73064df-2b36-23e9-e2c4-eccc515239d4.jpeg)
* オブジェクトの整理
    * `ウインドウ/アウトライナ`
    * ![mode17.jpeg](https://qiita-image-store.s3.amazonaws.com/0/45208/dbe879d2-5e30-d49e-dc32-5ea18eb6a4ad.jpeg)
    * ダブルクリックして名称変更
    * ![mode18.jpeg](https://qiita-image-store.s3.amazonaws.com/0/45208/e2ebb9ac-8257-ee91-fa0b-942bb49c2d6a.jpeg)




## モデリング注意点
### ミラーについて
* 知らぬ間にシンメトリされずにポリゴンを編集してることはよくあることです。その時は左右対称のオブジェクトは半分消して再びミラーするのがよくある手法のようです
* ジオメトリのミラーで頂点はセンターマージする
    * ポイントがセンターになってなくて、センターマージできず穴が開くことがあるので、頂点がセンターになっているか確認しておくと尚良し
* ![modemirr.jpeg](https://qiita-image-store.s3.amazonaws.com/0/45208/492f4f1d-ed2a-5dc8-e252-955f7cb50d40.jpeg)


### フェースやエッジや頂点の表裏確認方法
穴が空いてるの？　何かその面だけおかしいと思ったら...法線の反転を疑ってください
![あな.png](https://qiita-image-store.s3.amazonaws.com/0/45208/a65188cd-e646-1b48-4953-33b9107c13b8.png)

* 確認方法
    * `ディスプレイ/ポリゴン/フェース法線`
    * ![法線.png](https://qiita-image-store.s3.amazonaws.com/0/45208/9ad9120a-3763-8fe8-fca0-d835ac2a0bf7.png)
    * フェースから細い線が出ています。その線が突出している方が表です。見えにくいけど、この面は裏側に出ています
* 直し方
    * 反転しているフェースを選択し、`メッシュ表示/反転`で法線が反転します
        


### フェース、エッジ、頂点の重なりを確認する
* この後のUV展開で困ったことになるので、頂点、エッジの重なりは極力なくしましょう
* `ディスプレイ/ヘッドアップディスプレイ/ポリゴン数`でポリゴンの情報を表示させる
* 調べたい頂点を**範囲選択**し、画面上部に出ている数値を確認する
* 選んでいる頂点が1つに見えるのに、2と数えられていたら頂点が重なっている
* ![頂点.png](https://qiita-image-store.s3.amazonaws.com/0/45208/566fd3ee-893b-25d5-a753-993ea547b5df.png)
* 重なり合う2つの頂点を選んだ状態で、`Shift+右クリック/頂点のマージ/頂点をセンターにマージ`する
    * それかポリゴンタブ内のこのマーク![スクリーンショット 2018-04-02 19.41.49.png](https://qiita-image-store.s3.amazonaws.com/0/45208/22d76d2d-9982-2819-3ee2-fac382cbf08b.png)でもできる





# UV作成　（Maya2017 Update3にて）
**UVはポリゴンの表面を覆うラップのようなものです。このUVを作成することにより、テクスチャをポリゴンに反映させることができます。**

* UVエディタを開く　`UV/UVエディタ`
    * ![uvエディタ.jpg](https://qiita-image-store.s3.amazonaws.com/0/45208/b2bfee37-93b1-efbb-e36b-7a51dc7068e2.jpeg)
* 平面マッピング
    * バルーン（猫頭）を選択すると既にUVがあります。これを描きやすく展開し直します
        * ![展開図.jpg](https://qiita-image-store.s3.amazonaws.com/0/45208/43b7ccc4-6901-54e0-53aa-c9ab8f9f2321.jpeg)
    * `UV/平面`のオプションを表示します。投影元Z軸で展開してみると前側と後ろ側の表面がくっついた状態になっています。このままだと描画しにくいので、片面ずつ展開してみましょう
        * ![uv平面.jpg](https://qiita-image-store.s3.amazonaws.com/0/45208/fe4f307d-edfa-202b-fa40-080cc57371f8.jpeg)
    * フェースにして前面のパーツを選択/投影
        * ![前側マップ.jpg](https://qiita-image-store.s3.amazonaws.com/0/45208/9fc1075a-918d-2444-eb15-a8c0b25d9406.jpeg)
    * 裏側も同様に平面投影
        * ![前後ろ.jpg](https://qiita-image-store.s3.amazonaws.com/0/45208/afe9dfa7-b48e-8ac1-dbf4-10c81f019920.jpeg)
        * 一部重なっているので、重ならないように調整します
        * 画面上で右クリックからUVシェルを選び裏側を選択。UVツールキット内にある最適化を押す
        * ![裏側展開.jpg](https://qiita-image-store.s3.amazonaws.com/0/45208/6a834a2a-7ca8-1c38-6c29-334d7cbabda1.jpeg)
        * 最適化の後モデリングと同じ要領で回転して、中心が垂直になるように調整
    * 他のパーツ類も同様に展開
       
* UV配置
    * ![UV並べ.jpg](https://qiita-image-store.s3.amazonaws.com/0/45208/a0d1d204-aa43-2a47-721f-3c8a7d089897.jpeg)
    * なるべく大きく比率も変えず、隙間なく配置する
    * UVは青が表、赤が裏になります。赤が表だと描画が反転してしまうので反転する `ツールキット/トランスフォーム/スケール/反転`
* UVの書き出し
    * 右クリック/UVを選択し、範囲選択でUV全てを選ぶ
    * イメージの中のUVスナップショットを選択
    * ![スクリーンショット 2018-04-03 15.39.54.png](https://qiita-image-store.s3.amazonaws.com/0/45208/7554cf1f-5181-3865-3410-0e575efb4cb6.png)
    * 保存先、ファイル名、サイズ、形式など指定して書き出して完了
    * ![スクリーンショット 2018-04-03 15.43.08.png](https://qiita-image-store.s3.amazonaws.com/0/45208/a8c1555d-258d-fa1d-f23b-e581ff0681a8.png)









# テクスチャ作成

![uv9.png](https://qiita-image-store.s3.amazonaws.com/0/45208/4c0dad11-49f2-3f96-6099-a796882220c0.png)
完成イメージにゃー

* UV書き出ししたファイルを描画ソフトで開く（AdobePhotoShopを使用）
    * UVを目安に描画する。少し描画は広めに塗る
    * ![スクリーンショット 2018-04-03 16.10.04.png](https://qiita-image-store.s3.amazonaws.com/0/45208/59a30605-7689-143d-22cf-8bc184bf7356.png)
    * 描画したらpng書き出しをする
    * ![スクリーンショット 2018-04-03 16.15.52.png](https://qiita-image-store.s3.amazonaws.com/0/45208/9fab0d1f-0900-cc76-7694-0567bc23d46c.png)
* テクスチャをモデルに反映させる
    * マテリアルを作る。ハイパーシェード![スクリーンショット 2018-04-03 16.19.18.png](https://qiita-image-store.s3.amazonaws.com/0/45208/4fd93ecc-c1cc-961b-4ce6-45351eb29ab2.png)
を表示し、lambertシェーダーを作る
        * ![ハイパーシェード-1.jpg](https://qiita-image-store.s3.amazonaws.com/0/45208/b5fe9f23-df6c-b6f4-c144-a09b5c5b98f4.jpeg)
        * レンダーノードでファイルを選択
        * ![スクリーンショット 2018-04-03 16.28.09.png](https://qiita-image-store.s3.amazonaws.com/0/45208/6d911fb8-1c35-7797-7b5a-0477b7d7074c.png)
        * イメージの名前で作成したテクスチャのファイルを選択し設定は完了
        * ![スクリーンショット 2018-04-03 16.31.20.png](https://qiita-image-store.s3.amazonaws.com/0/45208/fe25cad4-f5ae-ec73-b28b-c48c25e03539.png)
    * モデルを選択し右クリック
        * ![マテリアル適用.jpg](https://qiita-image-store.s3.amazonaws.com/0/45208/8fb68a01-525d-c966-7934-8158dabe4428.jpeg)
        * UV適用![スクリーンショット 2018-04-03 16.38.56.png](https://qiita-image-store.s3.amazonaws.com/0/45208/5f15b839-13c5-d11a-31ad-f2f82f06a2a6.png)
        * ![スクリーンショット 2018-04-03 16.39.35.png](https://qiita-image-store.s3.amazonaws.com/0/45208/9c9e1e36-048e-1754-ea96-3590c0ddb71f.png)

















## UV&テクスチャ注意点

* サイズもバラバラだけど、1色なら問題なかった...
    * ![uvmap1.jpeg](https://qiita-image-store.s3.amazonaws.com/0/45208/a726d494-aa09-1ca6-d617-1c8d4127cc2a.jpeg)
![uvmap2.png](https://qiita-image-store.s3.amazonaws.com/0/45208/2e239a5e-0727-b01c-e089-67cc518e0444.png)
* 模様を入れてみると...
    * ![uvmap3.jpeg](https://qiita-image-store.s3.amazonaws.com/0/45208/8dcbe901-4e32-22ca-45ae-9528e7ad5472.jpeg)
![uvmap4.png](https://qiita-image-store.s3.amazonaws.com/0/45208/b375e2cf-a557-e0a7-dc5a-384dda830e97.png)
    * TOPビュー![uvmap5.png](https://qiita-image-store.s3.amazonaws.com/0/45208/8fb499c7-a204-e1cd-d15d-1bcb92e8f38d.png)
    * 変な繋がりになってしまった！！
    * 模様をシームレスにループさせたい場合は、UVのつながりや配置や大きさなどにも配慮せねばなりません

* UVの大きさを揃えて模様も繋げてみた
    * ![スクリーンショット 2018-04-03 17.57.34.png](https://qiita-image-store.s3.amazonaws.com/0/45208/d049b2c8-6a18-e4d8-cc85-654649b783bb.png)





# リギング
**リギングにはSkelton（骨組み）、Rigging（コントローラ）、Skining（スキンのウエイト設定）の3工程！**

* ジョイントの挿入 シンプルに作りました
* ![rig1.jpeg](https://qiita-image-store.s3.amazonaws.com/0/45208/8a0fd985-a1a8-c0d5-6d7f-db787b0c2ac7.jpeg "rig1.jpeg")


# スキニング
* `スキン/スキンのバインド`
* ![rig2.jpeg](https://qiita-image-store.s3.amazonaws.com/0/45208/0c2772bd-f08e-c167-edbe-cb89b11c8389.jpeg)
* 右クリック`スキンウエイトのペイントツール`を選択　ペイント操作：追加　値：0.2　にする
* ![rig3.png](https://qiita-image-store.s3.amazonaws.com/0/45208/80f9e5be-98e5-0e7d-4bdd-875510d4b4e2.png)
* 塗り塗りしてウエイト調整
* ![rig4.jpeg](https://qiita-image-store.s3.amazonaws.com/0/45208/6f7ac31f-66b1-db27-bb45-0682f2da26a4.jpeg)
* 個別に頂点から値を入力する`ウインドウ/一般エディタ/コンポーネントエディタ`
* ![rig5.jpeg](https://qiita-image-store.s3.amazonaws.com/0/45208/789b49d6-cdab-a9cb-487f-d63440313153.jpeg)
    * コンポーネントエディタはLTには無いみたいです...なので頑張って塗りましょう


# アニメーション
* Pose to pose!
* アニメーションプリファレンスを開いてアニメーションセッティング
* ![anim1.jpeg](https://qiita-image-store.s3.amazonaws.com/0/45208/f8d5bfc6-f761-b2b3-5bf5-10b5e8a69802.jpeg)
* 1フレーム目と24フレームに同じキーを入力します。最初のフレームと最後のフレームを同じにしてアニメーションを繰り返させるためです。
* ジョイントを選んだ状態で`S`でキー挿入。
* <img width="964" alt="スクリーンショット 2016-09-27 0.57.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/45208/897c1001-90d1-463f-9ce5-46471046ed1e.png">
* 間のフレームに移動し、ジョイントを動かして`S`でキー挿入する。
* <img width="962" alt="スクリーンショット 2016-09-27 0.58.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/45208/27b048b6-5613-3589-bb82-52cec8844aa1.png">
* ![anim4.gif](https://qiita-image-store.s3.amazonaws.com/0/45208/027ab16c-b0be-0630-9653-b16ff966bf76.gif)
* 動かすことができた！