PlayCanvas入門- モデルの作成～ゲームに入れ込むまで

## はじめに
３Dゲームを作りたいけれどなんもわからんという人向けの記事になります。私、自身も全くモデルを作ったり、マテリアルやテクスチャなどがよくわかっておりませんでしたが３Dのキャラクターを動かしたかったのでその時に得た知見を共有します。

## 環境
- Blender
- PlayCanvas
- Google Chrome

## 3Dモデルを作る
3Dモデルの作成なのですが、いきなりBlenderで作るとなるとハードルが高かったのと、マテリアルが入っているのが良かっため今回は[VOXCEL CANVAS](https://voxelcanvas.me/gallery)で３Dモデルを作りました。

### ギャラリーからボーンの入りそうなモデルVOXCELを選択して
<img src="https://user-images.githubusercontent.com/39250588/62673145-d1ec6000-b98c-11e9-9dcf-b816fb5c3bb4.PNG" width=500 />

###このボタンから VOXCELの編集画面に入ります。
<img src="https://user-images.githubusercontent.com/39250588/62673199-fd6f4a80-b98c-11e9-81e1-279a67f17446.PNG" width=500 />


### 編集する
VOXCELCANVAS EDITOR上で少しだけ厚みを付けたりしました。
<img src="https://user-images.githubusercontent.com/39250588/62673422-f268ea00-b98d-11e9-8cc4-f8041f6a9045.PNG" width=500 />

<img src="https://user-images.githubusercontent.com/39250588/62673505-26dca600-b98e-11e9-97d7-4078d5aa1520.PNG" width=500 />



### ダウンロードする
編集が終わったら`download`ボタンを選択してダウンロードをします。
<img src="https://user-images.githubusercontent.com/39250588/62673551-5ab7cb80-b98e-11e9-94ac-e68cf1f116d5.PNG" width=500 />


### 解凍する
ZIPで落とされたファイルを解凍すると`obj`ファイル、`mat`ファイル,`png`ファイルが入っています。
ダウンロードされたファイルの説明としては
- OJBファイル
  3Dモデル
- matファイル
  マテリアル
- png
  テクスチャ
がそれぞれ入っています。

<img src="https://user-images.githubusercontent.com/39250588/62673682-d9146d80-b98e-11e9-8bdc-42ed37bfc355.PNG" 
width="500" align="center" />

## ボーンを作成する
3Dモデルの作成にはBlenderを使用します。
<img src="https://user-images.githubusercontent.com/39250588/62673822-5fc94a80-b98f-11e9-8399-51bf16fdffc1.PNG" width=500 />

Blenderを起動すると最初に四角の箱があると思うのですがこれは`X`キーで消します。

<img src="https://user-images.githubusercontent.com/39250588/62673932-c2bae180-b98f-11e9-9154-e16b3a31ad4c.PNG" width=500 />


次に`VOXCEL CANVAS`で作成したオブジェクトを`import`する
<img src="https://user-images.githubusercontent.com/39250588/62673997-01509c00-b990-11e9-9505-1a6454e62ac0.PNG" width=500 />



`import`されるとこのように表示されていると思います。
<img src="https://user-images.githubusercontent.com/39250588/62674050-365cee80-b990-11e9-84a6-f2a0d571facb.PNG" width=500 />

このままだと白いのでこの状態で表示されているモデルを`右クリック`をして、左下を`material`にします。
<img src="https://user-images.githubusercontent.com/39250588/62674181-d6b31300-b990-11e9-960f-5b654dbeef17.PNG" width=500 />

今度は黒くなったと思うので`Lamp`の位置を動かして調整をします。
<img src="https://user-images.githubusercontent.com/39250588/62676744-5b0a9380-b99b-11e9-9d4d-011de034e422.PNG" width=500 />


### ボーンの作成を入れる

ボーンはこのサイトを参考してボーンをいれます
#### [ボーンかんたんBlender講座](http://krlab.info.kochi-tech.ac.jp/kurihara/lecture/cg/BlenderWeb_Hayashi/html/bone.html)

ボーンとモデルを紐づけるときに、エラーが出た場合にはこのサイトを参考になりました。
#### [【Blender】ボーンヒートウエイトのエラーが出たときに試す5つの解決策](http://nn-hokuson.hatenablog.com/entry/2017/08/30/195716)


### エクスポート

ボーンを設定することができました。このモデルを`export`をFBXとして`export`をします。
<img src="https://user-images.githubusercontent.com/39250588/62677699-c30ea900-b99e-11e9-9f10-b612a2f09901.PNG" width=500 />


## ゲームとして動かす
<img src="https://user-images.githubusercontent.com/39250588/62678009-af177700-b99f-11e9-8a9c-4da468a12a2b.PNG" width=500 />

ゲームとして動かすのには[PlayCanvas](https://playcanvas.jp)を使用します。
PlayCanvasの登録ができたら[新規のプロジェクトから](https://playcanvas.com)プロジェクトの作成をします。


### モデルをインポートする
３DモデルのインポートにはPlayCanvasの`ASSETS`の中に先ほど`export`‘したモデルデータをドラッグアンドドロップします。インポートできる形式は`obj`と`fbx`がともにインポートできるので、最初のボーンを入れていないモデルもインポートすることができます。

モデルをインポートすることができたらドラッグアンドドロップでゲームの中にゲームのシーンの中に入れます。

<img src="https://user-images.githubusercontent.com/39250588/62678177-3f55bc00-b9a0-11e9-8942-82cae2132609.PNG" width=500 />

モデルの大きさによってはカメラの位置的に表示されないため左横のバーからimportをしたモデルを選択し、`f`キーを押してカメラの位置を調整します。
![sentaku](https://user-images.githubusercontent.com/39250588/62678250-8348c100-b9a0-11e9-92f1-c47bb8709789.PNG)

3D空間に作ったモデルを入れることができました！🎉🎉

<img src="https://user-images.githubusercontent.com/39250588/62678308-ae331500-b9a0-11e9-99cb-2a2d5f41f17e.PNG" width=500 />



今回はモデルに対して回転を加えたいため新たに`rotate.js`というスクリプトを追加します。
<img src="https://user-images.githubusercontent.com/39250588/62698770-7bebdc80-b9cd-11e9-8e50-0fcda0810dc3.jpg" width=500 />


`rotate.js`の編集をし、下記のスクリプトを追加します。
<img src="https://user-images.githubusercontent.com/39250588/62699107-485d8200-b9ce-11e9-9c60-d5d1ab11e315.jpg" width=500 />


```javascript
//rotate.js
const rotate = pc.createScript('rotate');

rotate.prototype.initialize = function() {
    
};

rotate.prototype.update = function(dt) {
    const {x,y,z}= this.entity.rotate

    this.entity.rotateLocal(0,0.8,0)
};
```

これで`Launch`ボタンを押します。
<img src="https://user-images.githubusercontent.com/39250588/62699224-8fe40e00-b9ce-11e9-97fe-883a2470a35b.jpg" width=500 />

これで動きを確認できました。🎉🎉🎉


## 公開する

PlayCanvasで作成したスクリプトを作成したプログラムにURLを付与して公開することができます。
<img src="https://user-images.githubusercontent.com/39250588/62699311-c3269d00-b9ce-11e9-9c2b-d1ad8bf7115d.jpg"  width=500 />

こちらのURLをTwitterなどに投稿すると共有する事ができます。
<img src="https://user-images.githubusercontent.com/39250588/62699576-61b2fe00-b9cf-11e9-9590-6a7f29bd3591.jpg"  width=500 />




<font color="OrangeRed">
PlayCanvas開発で参考になりそうな記事の一覧です。
</font>
<font color="OrangeRed">
入門

- [PlayCanvas入門- モデルの作成～ゲームに入れ込むまで](https://qiita.com/yushimatenjin/items/2a2c35fe7b1d08f9e361)
- [JavaScriptでスロットを実装する。【PlayCanvas】](https://qiita.com/yushimatenjin/items/e84c42da74df1eb07386)
- [3Dモデルのビューワーを3分で作る【初めてのPlayCanvas】](https://qiita.com/yushimatenjin/items/4b09c9e2076a0b2a6933)
</font>
<font color="OrangeRed">
応用
</font>

- [PlayCanvasのコードエディターでes6に対応する](https://qiita.com/yushimatenjin/items/a61a21c64c1c1a550dd4)
- [Gulpのプラグインを書いたらPlayCanvasでの開発がめちゃくちゃ便利になった](https://qiita.com/yushimatenjin/items/5f0f178e8a4ba4a5ee57)
- [PlayCanvas Editorに外部スクリプトを読み込む新機能が追加されたので開発方法を考える。- Reduxを組み込む](https://qiita.com/yushimatenjin/items/7a64220cceac66843d7d)
</font>
<font color="OrangeRed">
その他の記事はこちらになります。

- [React Native + PlayCanvasを使ってスマートフォンゲームを爆速で生み出す](https://qiita.com/yushimatenjin/items/7c7ad5d35473c11f32f2)
- [PlayCanvasのエディター上でHTML, CSSを組み込む方法](https://qiita.com/yushimatenjin/items/814b4a32db53397219df)
- [【iOS13】新しくなったWebVRの使い方 ](https://qiita.com/yushimatenjin/items/344d86b3d193e0a88567)
</font>

<font color="OrangeRed">
その他関連
- [PlayCanvasタグの付いた記事一覧](https://qiita.com/tags/playcanvas)
</font>


### PlayCanvasのユーザー会のSlackを作りました！
少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください！

[日本PlayCanvasユーザー会 - Slack](https://t.co/IdSRIfJhN5?amp=1)