【JavaScript】 PlayCanvasの公式サンプルを使ってモバイル・デスクトップで動く一人称視点の空間を作る【WebGL】 


# ※補足
2020/6/18/ Qiita トレンド入りありがとうございます。
2020/6/19/ 一部修正 / Google Polyを使用して3Dモデルをインポートする手順について追記いたしました。
2020/6/22 続編 マルチプレイできるゲームを作るものを書きました。[【JavaScript】Photon + PlayCanvasを使ってモバイル・デスクトップで動く一人称視点のマルチプレイができる空間を作る【WebGL】](https://qiita.com/yushimatenjin/items/74b69d682fcaeb124308)

JavaScript製のゲームエンジンPlayCanvasを使用して、FPS視点の空間を作る方法を解説します。
コードはサンプルのものをそのまま使用しますので、15分〜30分程度でできる内容です。
![d7.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/e6ae22d6-7025-7a98-7c26-16261566f778.gif)

完成品のプロジェクトはこちらになります。
https://playcanv.as/p/ygI1bj7M/

## 準備するもの
- ブラウザ
- PlayCanvasアカウント

## PlayCanvasとは?
PlayCanvasはWebGLでのゲーム開発をするためのツールです。ソースコードはオープンソースで開発が進められており、MIT Licenseで公開されております。ウェブ開発のエディタが存在しています。

- [playcanvas.com](https://playcanvas.com)
- [playcanvas/engine](https://github.com/playcanvas/engine)
- [PlayCanvas Examples](http://playcanvas.github.io/)
- [awesome-playcanvas](https://github.com/playcanvas/awesome-playcanvas)

## PlayCanvasの登録〜新規プロジェクト作成まで

今回使用するサンプルは、カメラのカテゴリーの中にある、[First Person](http://playcanvas.github.io/#camera/first-person.html)このページにアクセスをすることで、スマートフォン、パソコンどちらでもFPS視点での操作を体験できます。



#### 1. PlayCanvasで新規のプロジェクトを作成

アカウントや、PlayCanvasのプロジェクトがまだ存在しない場合には、こちらのページからPlayCanvasのアカウントを作成、新規プロジェクトの作成を行ってください。
https://playcanvas.com/

#### 2.空のプロジェクトを追加
PlayCanvasに登録ができたら、`PROJECTS` → `NEW`の手順で新規プロジェクトを作成します。

今回は、`Blank Project`を選択して`CREATE`をしましょう。

![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fuser-images.githubusercontent.com%2F39250588%2F69203623-bf152a00-0b3c-11ea-8ac1-a91daca60b0a.PNG?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&w=1400&fit=max&s=601d8d7731b5801431e2bc94c170cfeb)


### PlayCanvas Editorについて

PlayCanvasで新規プロジェクトを立ち上げるとこのような画面になります。
こちらのEditorを使用して開発を進めていきます。

![](https://camo.qiitausercontent.com/29318195adf7140fbdc3ed846beed5385337ab9f/68747470733a2f2f692e696d6775722e636f6d2f335372614456782e6a7067)
※画像はイメージです

Editorについてはこのような構成をされています。それぞれの簡単な説明はこちらになります。

##### シーン(SCENE)
シーンビューには製作中のゲーム世界（シーン）が表示され、自由な位置・角度から眺めることができます。

##### インスペクター(INSPECTOR)
シーンの中で選択肢中のオブジェクトが持つ属性を表示・編集するためのビューです。 属性には座標やメッシュといった見た目上のものから、衝突判定や物理制御に関するパラメーターなどもあり、その他ユーザー定義のものもここに表示されます。

##### ヒエラルキー(HIERARCHY)
シーン内に存在するオブジェクトの一覧が表示されます。 編集中のシーン内でオブジェクトをコピー/ペーストしたり、適切な名前をつけて整理することもできます。

##### ASSETS
製作中のプロジェクト（ゲーム全体）に含まれるモデル、スクリプト、グラフィックやサウンドなどのデータ、その他のリソースがファイル単位で表示されます。

##### メニュー(MENU)
シーンのビューモードやプロジェクトセッティング等の作業が行えます。




## Editorを使用して開発をはじめる
それでは実際に、Editorを使用して開発を進めていきましょう。

### ASSETSから新規にスクリプトファイルを作成
PlayCanvas Editor上で、First Personのスクリプトを記述するための`JavaScript`ファイルを作成します。

#### 1. 右クリック → Scriptをクリック

![](https://i.imgur.com/kU5oQEM.png)

#### 2. `first-person-character-contorller.js`としてファイルを作成

![](https://i.imgur.com/b98lTeJ.png)


#### 3. このような形で`ASSETS`に新規のファイルが作成されます

![](https://i.imgur.com/4QA8MBi.png)


#### 4. ダブルクリックでコードエディタから編集できます
![](https://i.imgur.com/D5qvUwz.png)


## Examplesのスクリプトを使用する。
PlayCanvasのリポジトリから、一人称視点のサンプルで使われている、`First Person Character Controller`のスクリプトをコピーします。


#### 1. リポジトリへアクセス & ソースコードをコピー

[こちら](https://github.com/playcanvas/playcanvas.github.io/blob/master/assets/scripts/camera/first-person-camera.js)のページにアクセスします。
GitHubにアクセスをしたら、ソースコードをコピーします。


#### 2. コードエディタへコピー

コピーした内容を、先ほど作成した`first-person-character-controller`にコードエディタを使用してコピーをします。


<img width="892" alt="スクリーンショット 2020-06-10 15.29.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/fd155d5f-2492-3ba2-8005-dae0783e9893.png">

#### 3. ファイルを保存する
このとき左側のファイル名ががオレンジ色になっています。
この状態ではまだソースコードが保存されていませんので、
`Ctrl` + `S`または、GUI上で`File` → `Save File`をクリックしてください。

<img width="928" alt="スクリーンショット 2020-06-10 15.30.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/ba3960b9-b269-9146-8a34-aa22d48b6b9d.png">


保存されるとファイル名が白色になります。


## スクリプトを適用する
先程コピーした`.js`ファイルは、複数のPlayCanvasのスクリプトから構成されています。
PlayCanvasでは一つの`.js`ファイルの中にあるPlayCanvasのスクリプトをそれぞれエディタに摘要をする仕組みとして、GUI上から`パース`という操作をする必要があります。


#### 1. `first-person-character-controller`スクリプトを選択

コードエディタ上でソースコードの保存ができましたら次はエディタ上からソースコードのパースを行います。`first-person-character-contoller.js`を選択。

<img width="602" alt="スクリーンショット 2020-06-10 15.53.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/09759b05-9845-5fa0-35b3-7abb21a4772f.png">

#### 2. `INSPECTOR`からPARSEをクリック
INSPECTORにコードの詳細があります。パースを行うには、右下の`PARSE`ボタンをクリックします。
<img width="332" alt="スクリーンショット 2020-06-10 15.53.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/2660792c-8dbc-7970-7dbe-00bf1cc1ddaf.png">

#### 3. PARSE後
パースを行うと`characterController`, `firstPersonCamera`, `keyboardInput`, `mouseInput`, `touchInput`, `gamePadInput`というスクリプトに分解されます。これでPlayCanvas Editorでそれぞれのスクリプトを使用することができるようになります。
<img width="330" alt="スクリーンショット 2020-06-10 15.55.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/c0801d68-2d6b-35e2-fee0-802b8f32d908.png">

## シーンの構築

ここまでで、`PlayCanvasの登録`,`プロジェクトの作成`, `スクリプトの用意`という事前の準備はこれでできました、これからはPlayCanvas Editorを使用して実際のシーンを構築していきます。


### 一人称視点を実装する
現在はヒエラルキーの中には`Camera`, `Light`, `Box`, `Plane`の4つの`エンティティ`があります。

この状態から一人称視点の操作を行うためにプレイヤー、床、カメラの設定をしていきます。



#### 1. Boxを選択
左のINSPECTORにある、`Box`を選択します。

<img width="1177" alt="スクリーンショット 2020-06-10 15.34.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/91939e71-3d3b-4d7d-173c-30055e1e22b7.png">


#### 2. Boxの名前をPlayerに変更

選択した`Box`の名前を分かりやすくするために、INSPECTORから`Player`という名前にします。

<font color="OrangeRed">

### ※追記です

### このままだとすり抜けてしまうのでこのときに`Playe`rの`Position`の`y`を`0.5`に設定してください。

</font>
![](https://i.imgur.com/1MgzIeU.png)



### プレイヤーに`COLLISION`と`RIGIDBODY`を追加する

`Box`の名前を変更したら次に、`Player`エンティティに対して、`COLLISION`と`RIGID BODY`を追加していきます。

##### COLLISIONについて
> コリジョン
コリジョンコンポーネントはエンティティにコリジョンボリュームを割り当てます。コンポーネントインターフェイスはType属性に基づいて動的に様々な属性を表示させます。
> Collisionコンポーネントはコンポーネントパネルの右上のトグルで有効・無効を切り替えることができます。有効にした場合、また、コンポーネントがトリガーボリュームの場合(兄弟rigidbodyコンポーネントを持っていないため)、トリガーボリュームが有効になります。同様に、コンポーネントに兄弟rigidbodyコンポーネントがある場合、rigidbodyが有効になります。
> https://developer.playcanvas.com/ja/user-manual/packs/components/collision/

##### RIGID BODYについて
> リジッドボディ
Rigid Bodyコンポーネントはエンティティがシーンの物理シミュレーションに参加できるようにします。これにより、エンティティの動きを写実的にシミュレーションできます。コンポーネントインターフェイスは、Type属性に基づいて動的に異なる属性を表示します。
> Rigid Body コンポーネントはコンポーネントパネルの右上のチェックボックスで有効と無効を切り替えることができます。有効になった場合、また、コンポーネントに兄弟コリジョンコンポーネントがある場合、Rigid Bodyは物理シミュレーションに含まれます。
>https://developer.playcanvas.com/ja/user-manual/packs/components/rigidbody/


#### 1. PlayerエンティティにCOLLISIONを追加

`INSPECTOR` → `ADD COMPONENT` → `COLLISION`の手順で`COLLISION`を選択します。

<img width="1226" alt="スクリーンショット 2020-06-10 15.35.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/b47b9faa-334f-73e8-f736-a57179e57790.png">

これで`エンティティ`に`コンポーネント`として追加されます。
キューブと同じ値が設定されていますので、値についてはこのまま使用します。



#### 4. PlayerエンティティにRIGID BODYを追加

COLLISIONと同様に ADD COMPONENTからRIGIDBODYを追加します。

<img width="1224" alt="スクリーンショット 2020-06-10 15.35.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/9e9cc014-3505-d1a6-c4fd-9f517c6fba93.png">


#### 5. Ammo.jsをインポート

PlayCanvasで物理演算を使用したい場合は`ammo.js`を追加する必要があります。
IMPORT AMMOをクリックして物理エンジンを追加します。

![](https://i.imgur.com/LsSo0Oq.png)




#### 6. RIGIDBODYの値を変更する
##### ※ここの作業をスキップすると動きません

Ammo.jsがインポートできたら
<img width="326" alt="スクリーンショット 2020-06-10 16.09.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/739fdcef-1e50-734e-4a6d-11e8feea11ea.png">


[サンプルで使用されている値](https://github.com/playcanvas/playcanvas.github.io/blob/064d516089fd62ec25b2aa3aee6c0d185f6cbc56/camera/first-person.html#L135-L144)を参考にRIGIDBODYの値を下記に設定します。


|プロパティ名|値|
|---|---|
|Type|Dynamic|
|Mass| 80Kg|
|linearDamping| 0|
|linearFactor | 1,1,1|
|angularFactor|0, 0, 0|
|friction| 0.3|
|restitution| 0|

これで、プレイヤーの`COLLISION`,`RIGIDBODY`の設定ができました。

### 物理エンジンについて
PlayCanvasでは物理演算を使用する際には、`JavaScript`ベースの物理エンジンを使用します。Ammo.js以外の物理エンジンの選択肢としてPlayCanvasではp2.jsの対応がされています。

|Physics Engine|JS|WASM|2D|3D|PlayCanvas Integration|
|---|---|---|---|---|---|
|box2d.js|	✓|	✓|	✓||		
|Matter.js|	✓|		✓||		
|p2.js|	✓||		|✓|		Yes|
|cannon.js|	✓|	||		✓|		
|Oimo.js||	✓|	|		✓	|
その他の物理エンジンについても頑張れば導入できそうです。
https://developer.playcanvas.com/en/user-manual/physics/ammo-alternatives/




### SCRIPTコンポーネントを追加

先程、`パース`をしたスクリプトを`Player`に適用していきます。

#### 1. ADD COMPONENTからSCRIPTを追加
ADD COMPONENTから`SCRIPT`追加します。

![](https://i.imgur.com/1UvMXXI.png)


#### 2. SCRIPTコンポーネントの中のADD SCRIPTからスクリプトを追加

![](https://i.imgur.com/u0wGpO1.png)

#### 3. すべてのスクリプトを追加

`characterController`, `firstPersonCamera`, `gamePadInput`, `keyboardInput`, `mouseInput`, `touchInput`のスクリプトすべてを追加します。
追加方法は、それぞれ出てきたスクリプトが名をクリックすることで追加できます。

<img width="319" alt="スクリーンショット 2020-06-10 16.03.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/c32b92dc-9681-a380-4412-f3e57a78d96b.png">


#### 4. プレイヤーにスクリプトが適用される
<img width="330" alt="スクリーンショット 2020-06-10 16.03.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/ffe62881-9c13-b42a-fbb1-e6e9e7ef9b57.png">

スクリプトを適用した結果はこのような状態です。


#### 5. firstPersonCameraの中にある`Select Entity`をクリック

`firstPersonCamera`のスクリプトの`Camera`に`Camera`エンティティを追加します。

![](https://i.imgur.com/uEXX5vR.png)

#### 6.ヒエラルキーの`Camera`を追加
ヒエラルキーの中にある`Camera`をクリックします。`Select Entity`をクリックすると、ヒエラルキー以外が暗くなります。

<img width="1307" alt="スクリーンショット 2020-06-10 16.07.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/90a6bc29-d5af-74bf-0a1d-8675e5351b2a.png">

`Select Entity`をクリックすると、ヒエラルキー以外が暗くなります。

#### 7.ヒエラルキーから`Camera`を選択

ヒエラルキーをクリックすると、`Camera`という属性に`Caemra`エンティティが設定されます。

<img width="323" alt="スクリーンショット 2020-06-10 16.07.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/ef91bb78-98ab-563e-09f8-db4b9bef6967.png">


## 床を作成

Playerの作成はできました、次に移動するための床の設定をします。


### 床にScaleの変更、COLLISION, RIGIDBODYを追加する

#### 1.`Plane`エンティティを選択します。

<img width="1067" alt="スクリーンショット 2020-06-10 15.42.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/ccd842a6-ba07-b8f3-ea37-e2aedd5b77c3.png">

#### 2.Scaleの変更

今回は広めに動き回りたいのでPlaneのScaleを変更します。
Scaleは下記の値に変更をします。

|プロパティ名|値|
|---|---|
|Scale|50, 1, 50|

<img width="554" alt="スクリーンショット 2020-06-10 15.45.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/54a44c65-cf40-0b24-1eb9-def199a8e266.png">

#### 3. COLLISIONの設定
先ほどと同様にADD COMPONENTからCOLLISIONを選択します。
床の当たり判定も広く持ちたいのでCOLLISIONの値を変更します。

|プロパティ名|値|
|---|---|
|Type|BOX|
|Half Extents| 25, 1, 25|

<img width="332" alt="スクリーンショット 2020-06-10 15.46.36.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/45232379-1043-a53d-1ea3-adc5b2e273d6.png">



#### 4.  RIGIDBODYの追加

RIGID BODYも同様に、ADD COMPONENTから追加をします。
床の場合はこちらは`Static`のままで大丈夫です。

床の作成はこれで完成しました。次は一人称視点を実装していきます。


## 一人称視点を実装する
この状態でゲームを起動するとキャラクターの操作ができるようになっています。これの後は、ヒエラルキーを調整して、１人称視点を実装します。


### 現状確認をするゲームを起動する

#### 1. ゲームの起動をする

ゲームの起動は、`シーンビュー`から行うことができます。

![](https://i.imgur.com/c6cs8dS.png)

#### 2. `WASD`で操作、`Space`キーでジャンプ
`WASD`キーでPlayerの操作を行うことができます。`Space`をクリックすることでジャンプすることができます。

![d4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/778b1078-9e30-2689-b972-bf34198aa3ac.gif)


### カメラをPlayerのエンティティの下に配置

ゲームを起動すると分かりますが、現状はFirstPersonではありません、カメラの
カメラをPlayerのヒエラルキーの中に配置します。

#### 1.`Camera`エンティティを`Player`エンティティの下にドラッグアンドドロップ

##### 変更前
![スクリーンショット 2020-06-18 12.38.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/e1dac165-af3a-2506-7a82-d9fcc3aa7115.png)

##### 変更後

CameraエンティティをPlayerの下に配置をします。

![スクリーンショット 2020-06-18 12.38.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/176a1762-2077-7496-a8ad-80e497857ad8.png)

### 起動


![d5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/a7f786b1-8da7-ef34-30d5-a7a39fba6f59.gif)

この状態で起動すると、FPS視点での操作が可能になります。


### キューブのモデルを削除

FPS視点でキューブが見える必要は無いので、キューブのモデルを削除します。

#### 1. Playerを選択

Playerエンティティを選択します。

![スクリーンショット 2020-06-18 12.41.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/d6d3aa78-ea4f-af8c-de63-7dda805dae83.png)

#### 2. ENTITYのINSPECTORからモデルを削除

`Player`が選択したあと、INSPECTORの中にある、`MODEL`を削除します。



![sakujo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/773b4c1d-c9e6-de6d-1c70-8c6ebf78902e.png)



> モデル
モデルコンポーネントは、エンティティがプリミティブな形状やモデルのアセットをレンダリングすることを可能にします。
> Modelコンポーネントはコンポーネントパネルの右上のトグルで有効と無効を切り替えることができます。有効にした場合、Modelはシーンに追加されレンダリングされます
https://developer.playcanvas.com/ja/user-manual/packs/components/model/



`MODEL`コンポーネントを削除すると`COLLISION`, `RIGID BODY`, `SCRIPT`がPlayerエンティティの中に残ります。


![スクリーンショット 2020-06-18 12.44.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/ef5f73e3-7935-ea79-9ee2-f4e2e34662a1.png)



お疲れさまでした、これで一人称視点の設定ができました。

### 起動して確認

こちらがここまで作ったプロジェクトになります。
配置されているエンティティが床だけだと、少しわかりにくいので、建物を配置します。

![d6.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/ee3f186f-5c39-80c3-c3d2-0ba868ee76c3.gif)


## ※補足

### 建物を配置する

このままでは少し見栄えが寂しいので、建物を追加していきます。
建物についてはPlayCanvasで用意されている`STORE`の機能使います。


#### 1. STOREにアクセス
ASSETSの上にある、`STORE`をクリックして、STORE画面にアクセスします。

![store.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/c172ac40-f2b5-d73f-d9d1-6e63a287d66e.png)


#### 2. Small Villaを選択

`STORE`の中にある`Small Villa`をクリックします。

![スクリーンショット 2020-06-18 12.49.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/033df91a-da00-38bd-4dca-add6d06132d7.png)

#### 3. DOWNLOADをクリックし、プロジェクトへインポート

ページ内のDOWNLOADをクリックし、プロジェクトへインポートします。

![スクリーンショット 2020-06-18 12.51.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/5c6c0da9-0b7c-4d14-e0b2-c753a7ab6e86.png)

#### 4.プロジェクトへ戻り、Small Villaをドラッグアンドドロップで配置します。

![Sna.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/919e1a6a-d5a5-b072-705e-4dd1c431d785.png)

これでPlayCanvasで１人称の操作を実装する事ができました。
ストアから`Small Villa`を配置しましたが、ローカルのFBXやOBJファイルをエディタにドラッグアンドドロップすることで配置することができます。


### ゲームを公開する

PlaｙCanvasでは作成したゲームをウェブ上ですぐに公開することができます。


#### 1. 左のMEBUからPUBLISH/DOWNLOADをクリック
![publish.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/9ac652fa-751c-50f0-e975-da30b3933d6f.png)

#### 2. PUBLISH TO PLAYCANVASから公開
![oc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/7c09c09a-96ef-9e51-83da-6575ef94ec8a.png)


#### 3. BUILDSを確認
PUBLISHが成功するとBUILDSに共有できるURLが生成されます。
こちらを共有することで、第三者に完成したプロジェクトを公開することができます。

![URL.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/00ef1ec1-1e29-1743-4639-1a77d2cff7c9.png)

完成品のプロジェクトはこちら
https://playcanv.as/p/ygI1bj7M/
### ※補足
2020/6/18 Qiitaトレンド入りしました!
この後に繋がりそうなリンクを追記しました。


## 3Dモデルの素材について
この後、作った空間に3Dモデルを配置したくなったときに使えるウェブサイトを紹介します。

### Google Poly

素材の配布場所としておすすめなのがGoogle Polyです。
> `CC-BY`ライセンスで、公開されている3Dモデルが多数あります。
>https://support.google.com/poly/answer/7418679

![スクリーンショット 2020-06-19 13.43.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/b6b3d824-6297-c63f-7cd4-35121cc68bed.png)

https://poly.google.com/


#### 1. 検索
検索ボックスから動物の名前などで検索をします。

![スクリーンショット 2020-06-19 13.45.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/b85de478-daf3-87ad-663f-a283ded7d263.png)


#### 2. モデルを選択

製作者の名前が`Poly by Google`のFoxを選択し、モデルの詳細を確認できます。

![スクリーンショット 2020-06-19 13.47.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/eef8c798-b9c2-85f0-862d-76e5a5a1f68e.png)

画像の狐のモデルはこちらになります。
https://poly.google.com/view/10u8FYPC5Br

#### 3. OBJ形式でダウンロード

3DモデルをOBJ形式でダウンロードできますのでダウンロードします。
![スクリーンショット 2020-06-19 13.47.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/9692bc0f-3a69-c3a1-b014-57282ff9764b.png)

#### 4. PlayCanvasへインポート

ダウンロードした3DモデルはドラッグアンドドロップでPlayCanvasにインポートできます。

![dd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/3840c2c2-d095-675d-32ac-d217c86167b5.png)

#### 5. インポートしたモデルを配置する

インポートした3Dモデルを配置します。配置するためにはASSETSから、シーンにドラッグアンドドロップドロップをします。
Scaleがこのままだと小さいので`INSPECTOR`で`Scale`を`1`→`100`に変更します。
![model1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/4467f567-c28e-9c7c-bce6-f9272a8f8c24.png)

### テクスチャを適用する
このままだと色がついていないので、先程ダウンロードしたフォルダの中にある、テクスチャを適用します。


#### 1. マテリアルの設定(1) - モデルに適用されているマテリアルを確認

モデルの`マテリアル`、`テクスチャ`を設定するには、`モデル`コンポーネントの中にある、適用されているモデルをクリックします。
![model.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/802053da-0d83-6f89-f1d8-11e400d88fdc.png)

+#### 2. マテリアルの設定(2) - マテリアルの確認

![mat1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/0dff9be5-57b8-b646-4af6-95f8a464a0d6.png)

#### 3. マテリアルの設定(3) - テクスチャをDIFFUSEに設定
アップロードした、テクスチャを`ASSETS`からドラッグアンドドロップして、マテリアルの`DIFFUSE`に設定します。

![adad.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/29e3b939-8125-8618-50d5-2ebb7a06f04a.png)

これで、設定ができました。
質問などが有りましたら [@mxcn3](https://twitter.com/mxcn3)までお願いします。


<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>
- [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)
- [React Native + PlayCanvasを使ってスマートフォンゲームを爆速で生み出す](https://qiita.com/yushimatenjin/items/7c7ad5d35473c11f32f2)
- [PlayCanvasのエディター上でHTML, CSSを組み込む方法](https://qiita.com/yushimatenjin/items/814b4a32db53397219df)
- [日本PlayCanvasユーザー会 - Slack](https://join.slack.com/t/playcanvasjphq/shared_invite/zt-9aihkaep-TNA04tqgvYDFhBJABLLckw)


</font>

<font color="OrangeRed">
その他関連
- [PlayCanvasタグの付いた記事一覧](https://qiita.com/tags/playcanvas)
</font>
### PlayCanvasのユーザー会のSlackを作りました！

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

- [日本PlayCanvasユーザー会 - Slack](https://join.slack.com/t/playcanvasjphq/shared_invite/zt-9aihkaep-TNA04tqgvYDFhBJABLLckw)