Vue.jsで作るプロジェクトの背景にPlayCanvasを組み込むことでリッチにできそう。

PlayCanvasで作成したプロジェクトをVue.js背景として埋め込む

## やったこと

- PlayCanvasで作成したプロジェクトを背景として埋め込む

## 使った技術

- Vue.js
- PlayCanvas


## 作ったもの

このように背景に動くリッチなコンテンツを追加します。

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

作ったデモページ
https://trusting-heyrovsky-74ae1c.netlify.com/


## PlayCanvasのプロジェクトを作る


作ったプロジェクトについて、作ったプロジェクトについてはこちらのページからEDITORボタンを押すとソースコードや配置などを確認することができます。

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

https://playcanvas.com/project/647534/


PlayCavnasについて詳しく知りたい方はこちらのリンクなどを見ていただけると幸いです

- [PlayCanvas入門- モデルの作成～ゲームに入れ込むまで](https://qiita.com/yushimatenjin/items/2a2c35fe7b1d08f9e361)



### PlayCanvasのプロジェクトをPUBLISHする


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

今回はPlayCanvasのプロジェクトをこのような形で作成しました。

3D モデルについては　Google PolyからFBXをダウンロードして使用しました。
[https://poly.google.com/](https://poly.google.com/)

設定を追加してから、PlayCanvasではウェブ上からPUBLISHします。



#### Transparent Canvasにチェックを入れる

![](https://i.imgur.com/FXwuj03.png)
PUBLISHする前に`SETTINGS` → `RENDERING`から`Transparent Canvas`にチェックを入れます。


### PUBLISHをする

PUBLISHする際にはエディターの PUBLISH / DOWNLOADからPUBLISHすることができます。
![](https://i.imgur.com/fJjAB2h.png)



PUBLISHをすると個別のURLが発行され誰でもURLにアクセスにすることでページを閲覧できるようになります

今回PUBLISHしたデモ

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

[https://playcanv.as/p/8NZ92jAY/](https://playcanv.as/p/8NZ92jAY/)


### HTMLに埋め込む

PlayCanvasで作成したゲームを背景として埋め込みます。
今回はVue.jsで`init`したプロジェクトを使用してPlayCanvasのプロジェクトを埋め込みます。


今回埋め込んだプロジェクトの[リポジトリ](https://github.com/yushimatenjin/playcanvas-vue)に公開しています。


#### PUBLISHしたURLをiframeで埋め込む

PlayCanvasを`iframe`で埋め込む際にはPUBLISHされたURLに`overlay=false`というクエリパラメータを付けると全画面で表示されるようになります。

[https://playcanv.as/p/8NZ92jAY/?overlay=false](https://playcanv.as/p/8NZ92jAY/?overlay=false)


### App.Vue
```App.vue

<template>
<div>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
    <iframe src="https://playcanv.as/p/8NZ92jAY/?overlay=false" />
</div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

<style>

html{
  background:white;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: white;
  margin-top: 60px;
  background: transparent;
  position:absolute;
  z-index: 1;
  width: 100vw;
  height: 100vh;
}
iframe{
  width: 100vw;
  height: 100vh;
  border: none;
  position:fixed;
  z-index: 0;
  top: 0;
  left: 0;
}
</style>
```


iframeを追加することで背景として埋め込む事ができます。ロードを考えるとあまり実用的ではなさそうだけれどロード画面とかを工夫できれば結構きれいなものが作れそう。

埋め込むとこのような形の表示になります。
https://trusting-heyrovsky-74ae1c.netlify.com/


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