# 未完AR 講座 #3
## 前回の資料
https://hackmd.io/@uDHYaH9RQvW3aEdxDli6yg/rknTcpinY

## サンプル

blenderファイル
(https://drive.google.com/file/d/1-xVhoocaA5DDJiulLu0AqXMjAoz5FIIg/view?usp=sharing)

次回の講座で動かすために、ダンボーのようなモデルを作っていきます

## blenderのショートカットキー
Gキー : 移動
Sキー : 拡大縮小

blenderはx,y,z方向の3つの軸を元にモデリングを行っていきます。
例えばX軸方向に移動/拡大縮小を行いたい場合は、ショートカットキーを押した後に「X」を押すことでX軸にしか移動/拡大縮小ができないようにできます

Rキー : 回転
決められた角度(90°)回転したい場合は、ショートカットキーを押した後に「90」のように数字を入力してあげるとその角度分移動してくれます

マウスホイールを押しながらドラッグ : 視点の移動
右上にある軸をクリックすることでも視点を移動することができます

## メッシュの追加
今回は、複数の立方体を組み合わせることで体を作っていきます(複数の図形を組み合わせてモデリングすることをCSG表現と言います)
追加>メッシュ>立方体
から立方体を追加することができます

## 胴体を作る
先程追加した立方体を変形させて胴体を作っていきます
立方体を選択した状態でSキーを押し、縮小

少し細長くしたいのでZ軸方向に伸ばします
Sキーを押してZを押しZ軸方向に拡大

顔となる部分からかなりずれているのでGキーで移動させましょう
Gキーを押してZを押しZ軸方向に移動

後は同じように他のパーツを作っていきましょう(実演しながら説明します)

## modelの形式について
AndroidとiOSでは、それぞれ表示できる3Dモデルの形式が異なります。

Android
Androidの場合、glb / gltfファイルで書き出す必要があります。

iOS
iOSの場合は少し厄介で usdz ファイルで書き出す必要があります。

アドオンを導入することで、blender等から直接書き出せるのですが、テクスチャが適用されなかったりするので、Apple公式が提供している Reality Converter を使用して、gltfファイルから変換します。
[Reality Converter](https://developer.apple.com/augmented-reality/tools/)

## 出力
まずは、gltfファイルを出力します
ファイル→エクスポート→glTF 2.0を選択
ウィンドウが開くのでオプションを選んでいきます
フォーマットは初期状態でglbファイルになっているので、gltfファイルを選択

カメラや、光源を書き出さないために選択したオブジェクトにチェック

glTF2.0をエクスポートで任意の場所に書き出されます

## github pagesにデプロイ
githubからfork(自分のリポジトリとしてコピーすること)
forkボタンを押すと自分のアカウントにコピーされます

### リポジトリに変更を加える
codeからhttpsを選択し、コピー
ターミナルかgit bashを開いて配置したい場所に移動して git clone

Assetsに先程書き出したファイルを配置します

model-viewerのsrcを配置したファイルの名前に書き換えます

<model-viewer
      src="assets/mikan-ar-01.gltf"
      ios-src="assets/mikan-ar-01.usdz"
      alt="A 3D model"
      background-color="#70BCD1"
      shadow-intensity="0.7"
      camera-controls
      interaction-prompt="auto"
      auto-rotate ar magic-leap
      style="width: 100%; height: 600px;"
    ></model-viewer>

以上の作業が完了したら commitして pushしてください。

github pagesにデプロイ
[手順](https://docs.github.com/ja/pages/getting-started-with-github-pages/creating-a-github-pages-site)
Settingsから Pagesを選択

Sourceで masterを選択
Saveを押す

3. PCで発行されたURLにアクセス
3Dモデルが表示されていればOKです！

## 次回の先取り(早く終わった人)
### Mixamoでボーンを入れる
AdobeのMixamo(https://www.mixamo.com/)というwebサービスを使うことで簡単にボーンを入れることができます

### Mixamo用にFBXでモデルを出力
オブジェクトを選択してファイル>エクスポート>FBXを選択

選択したオブジェクトにチェックを入れてFBXエクスポートをクリック

Mixamoを開く
UPLOAD CHARACTERを選択

先程書き出したFBXファイルをアップロードします

アップロードするとこのような状態になります(テクスチャは読めないのでこの状態で正しいです)

進むと CHIN WEISTS...など体のパーツを指定する画面が出てくるので
右の図のように配置してあげます
NEXTを押すと自動的にボーンが入ります

### ボーンを入れたモデルをダウンロード
右側のDOWNLOADをクリックしてFBXモデルをダウンロードしましょう