PlayCanvasで簡単に簡単なWebARコンテンツを作る！

## 2023/06/01 更新

最新の情報はこちらを御覧ください。
- PlayCanvasでWebXR ARを簡単に実現
https://support.playcanvas.jp/hc/ja/articles/16619217483161

## PlayCanvasとは？

PlayCanvasとはWebGLベースのゲームエンジンのJavaScriptのライブラリで、開発～公開までをウェブ上で行うことができます。
ARやVRについても簡単に開発することができます。

#### PlayCanvasのユーザー作成についてはこちらをご覧ください


[アカウントの作成 - PlayCanvas](http://developer.playcanvas.com/ja/user-manual/creating-account)


## 今回作ったもの

このQRコード（ARマーカーを読み込むとウェブ上でARが遊べます）

![pattern-akeome (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/6fb468e2-9507-4f7e-fdc3-982d8e96cc04.png)


## 動画

![output.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/1d64afc6-e113-7314-5f88-09d9d3454065.gif)

今回はこれをどうやって作るかという記事になります。

### 1.公式サンプルにアクセス

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/89ce76d0-466f-a45f-436b-1031e0cef02a.png)


1. アカウントを作成して公式サンプルの[AR Starter Kit](https://playcanvas.com/project/481413/overview/ar-starter-kit)にアクセスします。

2. プロジェクトの画面からForkをします。

### 2. プロジェクト名を入力
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/78150f33-55bb-d144-2c94-2c79fa1be6e6.png)


1. Fork後のプロジェクトの名前を入力します。日本語も使えるので今回は「AR年賀状」とします。

Forkをしたプロジェクトにアクセスをして「Editor」に入ります。

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/923ecf4d-5865-8916-938a-080a4f810e31.png)

### 開発画面を起動する
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/4baff8d1-a312-70d9-afa8-8e1e06cbe994.png)

Forkをすると、新しいプロジェクトが作成され、編集ができるようになりますのでEDITORをクリックします。



### Publishする

PlayCanvasはエディターからPUBLISHができるのでそちらでPUBLISHをします。
標準のマーカーを読み取ると動かすことができます。

![publish.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/d2c333fc-37a8-4f03-e811-675aeedfffce.png)
PUBLISH / DOWNLOADをクリック

![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/eb49b17c-5d73-f662-8366-272feb452124.png)
PUBLISH TO PLAYCANVASをクリック

![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/30ffe3cf-c9a4-312b-952a-b81486179097.png)
URLを取得します。

## ARマーカーとQRコードを作成する

### QRコードを作成する
QRコードを作成するウェブサイトなどでPlayCanvasのPUBLISHされたURLを使って作成します。

[https://www.cman.jp/QRcode/](https://www.cman.jp/QRcode/)


### ARマーカーを作成する

作成したQRコードをチラのウェブサイトから`.patt`ファイルに変換します。

[https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html](https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html)


### PlayCanvasにARマーカーを設定する

![paat.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/8ec2dacc-d552-1cce-b580-c3f616a7cf22.png)

##### ARマーカーを設定する
ダウンロードした`.patt`ファイルをPlayCanvasのエディター上に、ドラッグアンドドロップしてPlayCanvasのエディターにアップロードします。アップロードしたあと`Matrix Marker`エンティティを選択し、アップロードした、`.patt`ファイルを適用します。


### もう一度PUBLISHする

変更を加えたのでもう一度`PUBLISH`します。

### QRコードを読み込む

QRコードを読み込み、iPhoneの場合はSafariを使用して確認します。
カメラの権限を求められますので許可をし、ARマーカーにカメラをかざすとPlayCanvas製のゲームが表示されます。

文字や3Dモデルのインポートやエフェクトについての説明はこちらの記事をご覧ください。

[PlayCanvasでAR年賀状を作る](https://qiita.com/yushimatenjin/items/03e71c363d6a28ccaa7e)

以下PlayCanvas開発で参考になりそうな記事の一覧です。

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

応用
- [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)
- [【iOS13】新しくなったWebVRの使い方 ](https://qiita.com/yushimatenjin/items/344d86b3d193e0a88567)
### PlayCanvasのユーザー会のSlackを作りました！
少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください！

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