3Dモデルのビューワーを3分で作る【初めてのPlayCanvas】

### PlayCanvasとは

PlayCanvasの開発はイギリスのPlayCanvas社（現在はSnapChatのSnap）が行っております。
<iframe width="800" height="480" src="https://www.youtube.com/embed/PS4oMLPyYfI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
公式ドキュメントによると

>PlayCanvasは、インタラクティブなウェブコンテンツ用のビジュアル開発プラットフォームです。作成するツールとウェブアプリは、どちらもHTML5を使用しています。 プラットフォームはウェブでホストされているため、インストールするものは何もなく、対応されているウェブブラウザを実行する任意のデバイスからアクセスできます。  

> https://developer.playcanvas.com/ja/user-manual/introduction/


### 公式サイト

![https://user-images.githubusercontent.com/39250588/64594900-6d179180-d3a0-11e9-933a-56bcbc3774bd.PNG](https://user-images.githubusercontent.com/39250588/64594900-6d179180-d3a0-11e9-933a-56bcbc3774bd.PNG)
1. PlayCanvasのエディターを使用するためにPlayCanvasに登録をします。

[https://playcanvas.jp](https://playcanvas.jp)

## アカウント登録をする
PlayCanvasを使用するために公式サイトからアカウントを登録します。

### 1. サインアップに必要な情報を入力する


![https://user-images.githubusercontent.com/39250588/64594739-1a3dda00-d3a0-11e9-9b05-446ccb5c451b.png](https://user-images.githubusercontent.com/39250588/64594739-1a3dda00-d3a0-11e9-9b05-446ccb5c451b.png)

### 2. デモプロジェクトが開かれる
https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-Ln6IBXaqxl-ZPewffQr%2F-LngitHilFlR66-2BNhe%2F-LngitzvlqKuHtkwM4u6%2Fdemostart.png?generation=1567339817366292&alt=media

① ここからシーンを選択してプロジェクトの編集ができます
② シーンを追加できます
③ BUILDSでは今までのビルド一覧が見られます
④ PUBLISHではPlayCanvasプロジェクトの公開ができる
⑤ VERSION CONTROLではバージョン管理をできます
⑥ シーンの削除をできます

今回はこのデモプロジェクトは使わないので閉じます。デモプロジェクトが開かれますので

### 3. 自分のプロジェクト一覧にアクセスをする
![Projet](https://user-images.githubusercontent.com/39250588/64595767-2aef4f80-d3a2-11e9-9e49-ff20b4b45ff1.PNG)

1. [https://playcanvas.com](https://playcanvas.com)にアクセスする
2. Projectsをクリックする

### 4. 新規プロジェクトを作成する
1. NEWボタンから新規プロジェクトを作成する
![new](https://user-images.githubusercontent.com/39250588/64595828-465a5a80-d3a2-11e9-98e4-411ca3744eb5.PNG)
2. Model Viewer Starter Kitを選択

### 5. シーンが開かれます
![model](https://user-images.githubusercontent.com/39250588/64596028-ad780f00-d3a2-11e9-8bc3-9106b9a667c5.png)


### 6. 使用するモデルをダウンロード
今回は使用するモデルをNASAからダウンロードしてきます。

1. [https://nasa3d.arc.nasa.gov/detail/aces](https://nasa3d.arc.nasa.gov/detail/aces)にアクセス
2. ダウンロードをして解凍

### 7. PlayCanvasに入れ込む
1. 解答をした3DSファイルをドラッグアンドドロップでPlayCanvas上にインポートします。
> PlayCanvasでは他にもFBXやOBJといった形式のデータをインポートすることができます。

### 8. モデルを配置する
![moaaaa](https://user-images.githubusercontent.com/39250588/64596206-0051c680-d3a3-11e9-839d-0c23e93743f7.png)
1. 現在キューブが配置されてるところをダウンロードしてきたモデルに変更します。

これで3Dモデルを表示することができました。
今回はモデルビューワーで最初にプロジェクトを作成したので、このまま起動をしてみましょう。

### 9 起動をする

![modemode](https://user-images.githubusercontent.com/39250588/64596346-3bec9080-d3a3-11e9-834d-5884de5442b9.png)

1. ▶ボタンから起動をします。


### 完成
![nasa](https://user-images.githubusercontent.com/39250588/64596396-56bf0500-d3a3-11e9-9400-e6c79b53e14a.png)

これでダウンロードしてきたモデルをグリグリ動かすことができました。

### 公開する
PlayCanvasには公開機能があるのでそちらで一般公開向けのURLを生成します。

![https://user-images.githubusercontent.com/39250588/64594675-fda1a200-d39f-11e9-9d65-8459f9e8a028.png](https://user-images.githubusercontent.com/39250588/64594675-fda1a200-d39f-11e9-9d65-8459f9e8a028.png)

1. PUBLISH / DOWNLOADをクリック
2. PUBLISH NOWをクリックします。

ここから生成されるURLを共有することで一般向けに公開することができます。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">NASAの3DモデルをPlayCanvasに取り込こんでぐりぐり回す <a href="https://t.co/9G7CI3ku9x">https://t.co/9G7CI3ku9x</a></p>&mdash; はが (@Mxcn3) <a href="https://twitter.com/Mxcn3/status/1171328206634274816?ref_src=twsrc%5Etfw">September 10, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


##### 技術書典に本を出します。
こ29DでPlayCanvas本を恐らくほそぼそと販売しておりますのでもしよろしければ 9月22日
[https://techbookfest.org/event/tbf07/circle/6243347257622528](https://techbookfest.org/event/tbf07/circle/6243347257622528)

<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)