これWebなの！？PlayCanvasで作られたサンプル８個紹介！

## 1つめ！PlayCanvasを始めると誰もが通る道！"My First Project"

![4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/0bfe641c-8804-aa82-a7d5-58114c8e8d73.png)

PlayCanvasに登録をすると強制的に飛ばされるこのプロジェクト、PlayCanvasで物理演算とキーボード操作が出来ることを教えてくれる


次からはPlayCanvasで作られた面白いプロジェクトを紹介します。
[https://playcanvas.com/editor/project/371667](https://playcanvas.com/editor/project/371667)

## 2つめ！めちゃくちゃキレイ！MozillaとPlayCanvasが共同で開発した "After the Flood"

GIGAZINEでも紹介されていた。 After the FloodこちらはPlayCanvasの組み合わせです。
![after_flood.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/47311f9f-388d-96a9-0c0d-62785c04f588.png)

[http://aftertheflood.playcanvas.com/](http://aftertheflood.playcanvas.com/)

[「WebGL 2」を自分のブラウザで実際に動かして確認できる「After The Flood」- GIGAZINE](https://gigazine.net/news/20170314-webgl-2-after-the-flood//)


## 3つめ!Twitterカードとして埋め込めるゲームPlayCanvas運営事務局作成のサンディーフォト

PlayCanvasで作成したゲームはTwitterのPlayCardという形でTwitter上で遊ぶことができます。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【PlayCanvas事例紹介】<br>Twitterで遊べる広告！ -Sandyフォト-<br><br>Twitter Player Cardで遊べるリッチメディアコンテンツです。ぐりぐり回してPlayCanvas日本公式キャラクター、&quot;Sandyちゃん&quot;のベストショットを撮ってシェアしましょう！<a href="https://twitter.com/hashtag/playcanvas?src=hash&amp;ref_src=twsrc%5Etfw">#playcanvas</a> <a href="https://twitter.com/hashtag/sandyphoto?src=hash&amp;ref_src=twsrc%5Etfw">#sandyphoto</a> <a href="https://twitter.com/hashtag/webgl?src=hash&amp;ref_src=twsrc%5Etfw">#webgl</a> <a href="https://t.co/Qg9Dz7MTo3">https://t.co/Qg9Dz7MTo3</a></p>&mdash; PlayCanvas運営事務局 (@playcanvasJP) <a href="https://twitter.com/playcanvasJP/status/1174154333178351616?ref_src=twsrc%5Etfw">September 18, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


[PlayCardの作成はこちら](https://generate.spam.tokyo/)

## 4つめ Ship Viewer


After the Floodのような形です。After the Flood同様、プロジェクトが公開されているので、自分で作る際にはカメラの動きなどが参考になります！

![ShipViewr.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/8d42e661-620f-f512-0bd9-bfd713c5589a.png)

https://playcanv.as/p/sBlZkpKX/


## 5つめ！Webサイトから6dof / 3dofのVRが使える WebVR Lab

PlayCanvasの公式のチュートリアルにある。WebVR Lab、*iPhone*, *Oculus Quest*, *Android*などで開くと、それぞれVRを体験することができます。
※iOS13(には未対応みたいです...(APIが変わったため）

![vr.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/a53ee29c-c8e9-0d09-f8ff-66c5023865a5.png)

https://developer.playcanvas.com/ja/tutorials/webvr-lab/


## 6つめ！PhotonとPlayCanvasを組み合わせて作られたマルチプレイのゲーム

![PlayCanvasGame.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/e21beb5a-c5c6-4535-2306-4f68287a8b6d.png)


[https://playcanvas.utautattaro.com/photon/](https://playcanvas.utautattaro.com/photon/)

[https://qiita.com/utautattaro/items/d754b9c0fcb50dc1100a](https://qiita.com/utautattaro/items/d754b9c0fcb50dc1100a)

## 7つめ！AR Image Tracking Starter Kit

![mm.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/38e0ede3-9f8d-184f-b07a-d09945959ecb.png)


マーカーレスのWebARのプロジェクト！PlayCanvasのアカウントと8thwallのアカウントさえあればかんたんにWebARが作れる。


https://playcanvas.com/project/631721/overview/ar-image-tracking-starter-kit

使い方
- [8th Wallで始めるインストール不要なWebAR開発【PlayCanvas】](https://qiita.com/yushimatenjin/items/01ed252bf243d48c3ca3)

- [ARでサイコロを投げるまで ～Blenderを使って３Ｄモデルの作成~JavaScriptでサイコロを動かす～](https://qiita.com/yushimatenjin/items/143c0aa22953864fa2fd)

## 8つめ！PlayCanvasで作られたウェブサイト！

![ococ.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/2c7591c4-80de-2e11-28e0-708b40f21afe.png)

PlayCanvasで作られたウェブサイトです。

[https://playcanvas-demo.jp/examples/web/3dwebsite/](https://playcanvas-demo.jp/examples/web/3dwebsite/)


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