【JavaScript】PlayCanvasを使ってモバイル・デスクトップで動く3D空間上で動画が見れるゲーム作る【WebGL】

大体１０分ほどで、ブラウザ上で動く3D空間上で動画が見れるゲームを作ります。
動画を見る空間を作るまでを１つの記事として書きたかったのですが、分量の都合上、３つの記事に分けて公開させていただきました。
これが３つ目の記事になります。

PlayCanvasを使って3D空間を作る記事につきましてはこちらの２つの記事で作り方を解説しています。

1.  [【JavaScript】 PlayCanvasの公式サンプルを使ってモバイル・デスクトップで動く一人称視点の空間を作る【WebGL】](https://qiita.com/yushimatenjin/items/4310401a26522ba4d502)
2. [【JavaScript】Photon + PlayCanvasを使ってモバイル・デスクトップで動く一人称視点のマルチプレイができる空間を作る【WebGL】](https://qiita.com/yushimatenjin/items/74b69d682fcaeb124308)

### 今回作るもの
![bigbugbunny.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/4634f88e-8309-75ba-00eb-3c7665c3e2af.gif)

前回の記事 [【JavaScript】Photon + PlayCanvasを使ってモバイル・デスクトップで動く一人称視点のマルチプレイができる空間を作る【WebGL】](https://qiita.com/yushimatenjin/items/74b69d682fcaeb124308)のプロジェクトを元にして、3Dで動画が見れる空間を作成します。

完成品のプロジェクトはこちらになります。

https://playcanv.as/p/jfhaQCKG/

## 準備 アカウントの作成〜フォーク

#### 準備するもの
- PlayCanvasアカウント  
[https://playcanvas.com](https://playcanvas.com)
- Photonアカウント  
[https://www.photonengine.com/ja/Photon](https://www.photonengine.com/ja/Photon)


### プロジェクトの準備

### フォーク

#### 1.フォークするプロジェクトへアクセス

前回の記事で作成したプロジェクトのファイルをフォークします
https://playcanvas.com/project/696634/

プロジェクトにアクセスをしたらフォークボタンをクリックします。


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


#### 2. Forkをクリックしてプロジェクトを複製

プロジェクト名を入力してForkボタンをクリックします。

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


#### 3. フォークしたプロジェクトからEDITORへアクセス

プロジェクトをフォークしたら、EDITORをクリックします

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


#### 4. シーンを選択

シーンを選択します。今回は`Untitled`というシーンを選択します。

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


## ビデオテクスチャの実装

これまで、前回までの記事で作成したシーンを複製することができました。

ビデオを再生するための準備をしましょう。ビデオを再生するためには、ビデオテクスチャを使用します。今回は四角いエンティティを作成して、そこにビデオをテクスチャを貼ります。


### スクリーンにするエンティティを作成
3D空間に動画を流すために、まず、映像を映し出すためのエンティティを作成します。

#### 1. `Box`エンティティを新規作成する
![](https://i.imgur.com/oZKnfXd.png)

#### 2. エンティティの大きさを変更
エンティティの大きさを変更しましょう。
それぞれ下記の値に設定をします。

|プロパティ ( scale)|値|
|---|---|
|x|16|
|y|9|
|z|0|

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

#### 3. エンティティのポジションを変更
エンティティの位置を変更しましょう。こちらは好きな位置に配置をしてしまって大丈夫です。
![](https://i.imgur.com/YWe2Z5g.png)


#### 4. エンティティの名前をScreenに変更
エンティティが増えてきたときにわかりやすいように、右の`INSPECTOR`から`name`の値を`Box`→`Screen`に変更します。
![](https://i.imgur.com/QAEupNS.png)


### マテリアルの作成
動画を映し出すための`Material`を作成します。

#### 1. ASSETSで右クリックをしてマテリアルを作成

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

#### 2. DIFFUSEの値を黒色に設定
マテリアルのDIFFUSEを黒色に変更します。

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

#### 3. エンティティにマテリアルをドラッグアンドドロップで追加

エンティティにマテリアルを追加します。
マテリアルを選択して、エンテティにドラッグアンドドロップをすることでマテリアルを追加できます。

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


### スクリプトを追加
エンテティ、マテリアルの設定ができたので、次に動画テクスチャーのスクリプトを追加します。

動画テクスチャについては下記リンクのチュートリアルにもサンプルのプロジェクトがあります。
> 動画テクスチャー
> https://developer.playcanvas.com/ja/tutorials/video-textures/



動画については、BigBuckBunnyを使用します。

[https://gist.github.com/jsturgis/3b19447b304616f18657](https://gist.github.com/jsturgis/3b19447b304616f18657)



#### 1. Rootエンテティを選択し、SCRIPTコンポーネントの`Create Script`をクリック

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

#### 2. ファイルを新規作成

`Create Script`をクリックすると、入力欄が出てきますので、ここに`video-texture.js`と入力をしてエンターを押します。
![](https://i.imgur.com/LUMNIaX.png)

#### 3. ASSETSから`video-texture.js`をダブルクリック
![](https://i.imgur.com/HLPO4aD.png)


#### 4. 開かれたコードエディタにスクリプトをコピー
コードエディタが開かれますが、そこに下記のスクリプトをコピーします。

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

```jsx
/*jshint esversion: 6, asi: true, laxbreak: true*/

const VideoTexture = pc.createScript('videoTexture')

VideoTexture.attributes.add('material', {
    type: 'asset',
    assetType: 'material'
})

VideoTexture.attributes.add('videoSrc', {
    type: 'string',
    default:
        'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
})

VideoTexture.prototype.initialize = function () {
    this.videoTexture = new pc.Texture(this.app.graphicsDevice, {
        format: pc.PIXELFORMAT_R8_G8_B8,
        autoMipmap: false
    })
    this.videoTexture.minFilter = pc.FILTER_LINEAR
    this.videoTexture.magFilter = pc.FILTER_LINEAR
    this.videoTexture.addressU = pc.ADDRESS_CLAMP_TO_EDGE
    this.videoTexture.addressV = pc.ADDRESS_CLAMP_TO_EDGE

    var video = document.createElement('video')
    video.addEventListener('canplay', () => {
        this.videoTexture.setSource(video)
    })

    const loadVideo = () => {
        video.src = this.videoSrc
        video.loop = true
        video.muted = true
        video.autoplay = false
        video.crossOrigin = 'anonymouse'
        video.setAttribute('playsinline', '')
        video.setAttribute('webkit-playsinline', '')
    }
    loadVideo(this.videoSrc)

    this.app.mouse.on(pc.EVENT_MOUSEDOWN, () => {
        video.muted = false
        video.play()
    })
    if (pc.platform.mobile) {
        this.app.touch.on(pc.EVENT_TOUCHSTART, () => {
            video.muted = false
            video.play()
        })
    }

    const material = this.material.resource
    material.emissiveMap = this.videoTexture
    material.update()
}

VideoTexture.prototype.update = function (dt) {
    this.videoTexture.upload()
}
```

#### 5. スクリプトの変更を保存する
`Ctrl` + `s`やMacの場合は`Command` + `s`を押して、スクリプトの変更を保存します。
左側のファイル名が白色になっていれば、変更が保存されています。

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


#### 6. エディタへ戻り、スクリプトの`PARSE`をクリック

スクリプトの保存ができたら、エディタに戻り、`video-texture.js`をエディタ側で設定をします。

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


まず、スクリプト名の横にある`PARSE`ボタンをクリックします。
すると、`material`, `videoSrc`の選択肢が出てくるかと思います。
`videoSrc`については先程コピーしたスクリプトで、デフォルトで値を設定している`URL`になっています。

#### 7. マテリアルをドラッグアンドドロップでスクリプト属性に追加する

`material`の属性に、先程作成したマテリアルをドラッグアンドドロップで適用します。

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



### 起動
3D空間に動画の配置をするための設定はこれで完成です。
ビデオテクスチャとして使用することで、動画を再生するプロジェクトは簡単に作ることができました。

完成品 : https://playcanv.as/p/jfhaQCKG/


## ゲームを公開する

PlayCanvasでは作成したゲームをウェブ上ですぐに公開できます。
こちらは今回作成したゲームを公開するための方法になります。

#### 1. 左のMEBUからPUBLISH/DOWNLOADをクリック
![publish.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/9ac652fa-751c-50f0-e975-da30b3933d6f.png)

#### 2. PUBLISH TO PLAYCANVASから公開
![oc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/7c09c09a-96ef-9e51-83da-6575ef94ec8a.png)


#### 3. BUILDSを確認
PUBLISHが成功するとBUILDSに共有できるURLが生成されます。
こちらを共有することで、第三者に完成したプロジェクトを公開できます。

![URL.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/00ef1ec1-1e29-1743-4639-1a77d2cff7c9.png)








今回のプロジェクトで質問や意見がありましたら。GitHubのIssueか@mxcn3まで連絡をお願いします。


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