search
LoginSignup
7

More than 3 years have passed since last update.

posted at

updated at

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

AR Advent Calendar 2019 7日目

投稿が遅くなってしまいました、ARコンテンツ7日目です。PlayCanvasを使用してWebARのコンテンツを簡単に作る方法を紹介します。

PlayCanvasとは?

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

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

アカウントの作成 - PlayCanvas

今回作ったもの

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

pattern-akeome (1).png

動画

output.gif

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

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

1.png

  1. アカウントを作成して公式サンプルのAR Starter Kitにアクセスします。

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

2. プロジェクト名を入力

3.png

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

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

4.png

開発画面を起動する

5.png

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

Publishする

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

publish.png
PUBLISH / DOWNLOADをクリック

6.png
PUBLISH TO PLAYCANVASをクリック

7.png
URLを取得します。

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

QRコードを作成する

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

https://www.cman.jp/QRcode/

ARマーカーを作成する

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

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

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

paat.png

ARマーカーを設定する

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

もう一度PUBLISHする

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

QRコードを読み込む

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

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

PlayCanvasでAR年賀状を作る

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

入門
- PlayCanvas入門- モデルの作成~ゲームに入れ込むまで
- JavaScriptでスロットを実装する。【PlayCanvas】
- 3Dモデルのビューワーを3分で作る【初めてのPlayCanvas】

応用
- PlayCanvasのコードエディターでes6に対応する
- Gulpのプラグインを書いたらPlayCanvasでの開発がめちゃくちゃ便利になった
- PlayCanvas Editorに外部スクリプトを読み込む新機能が追加されたので開発方法を考える。- Reduxを組み込む

その他の記事はこちらになります。
- React Native + PlayCanvasを使ってスマートフォンゲームを爆速で生み出す
- PlayCanvasのエディター上でHTML, CSSを組み込む方法
- 【iOS13】新しくなったWebVRの使い方

PlayCanvasのユーザー会のSlackを作りました!

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

日本PlayCanvasユーザー会 - Slack

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
7