【PlayCanvas】ヘッドレスCMS(microCMS)から情報を取得してエンティティを配置する。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/3f668f95-482f-a568-5e52-1e13f7d085c7.png)

モデルの配置などの変更などをヘッドレスCMSから変更をしたい事があったのでmicroCMSを利用してみました。
### 1. SDKをPlayCanvasエディタに設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/0df2409f-0ef0-f3e9-bbcf-670ca543a817.png)

GitHubで公開されているmicroCMSのSDKを利用します。
https://github.com/microcmsio/microcms-js-sdk

PlayCanvas Editorの`SETTINGS` -> `EXTERNAL SCRIPTS`からunpkg経由で配信されているスクリプトのURLを設定します。
https://unpkg.com/microcms-js-sdk@latest/dist/umd/microcms-js-sdk.js

#### 2. microCMSを利用するためのコードを追加
エディタ上に`playcanvas-microcms.js`としてスクリプトを新規作成します。

```javascript
// playcanvas-microcms.js
class PlaycanvasMicrocms extends pc.ScriptType {
  initialize() {
    this.app.microcmsClient = microcms.createClient({
      serviceDomain: this.serviceDomain,
      apiKey: this.apiKey,
    });
  }
}
pc.registerScript(PlaycanvasMicrocms);
PlaycanvasMicrocms.attributes.add("apiKey", {
  type: "string",
  description: "",
});
PlaycanvasMicrocms.attributes.add("serviceDomain", {
  type: "string",
  description: "YOUR_DOMAIN is the XXXX part of XXXX.microcms.io",
});
```


##### スクリプト属性でAPIキー・サービスドメインを設定
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/e66d3141-fbcb-217f-c24e-bb55d0ad8157.png)
Rootのエンティティなどにスクリプトを追加します。APIキーとサービスドメインをスクリプト属性として設定します。
APIキーはこちらから取得できます。
https://document.microcms.io/content-api/x-microcms-api-key
サービスドメインは`XXXX.microcms.io`はこちらの`XXXX`の部分です。


APIスキーマはこのように設定しています。URLにGLBのモデルを設定しています。
| フィールドID| 表示名 |種類|
| ---- | ---- | ---- |
| title | タイトル | テキストフィールド |
| url | 3Dモデル(glb形式のURL)|テキストフィールド|
| positionX| x|数字|
| positionY| y|数字|
| positionZ| z|数字|
#### microCMSのデータ
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/457b8ed1-5fdf-c442-f2ce-1d850f551727.png)


#### 3.microCMS上のデータを元にPlayCanvasに配置

```javascript
// playcanvas-microcms-connect.js
class PlaycanvasMicrocmsConnect extends pc.ScriptType {
  async initialize() {
    const options = {
      endpoint: this.endpoint,
      queries: {
        limit: this.limit,
        orders: this.orders.join(","),
        offset: this.offset,
      },
    };
    const result = await this.app.microcmsClient.getList(options);
    if (!result.contents) return;
    this.renderContents(result.contents);
  }
  async renderContents(contents) {
    contents.forEach((item) => {
      const { title, url, positionX, positionY, positionZ } = item;
      this.app.assets.loadFromUrlAndFilename(
        url,
        `${title}.glb`,
        "container",
        (err, asset) => {
          const entity = asset.resource.instantiateRenderEntity({
            castShadows: false,
          });
          const position = new pc.Vec3(positionX, positionY, positionZ);
          entity.setPosition(position);
          this.app.root.addChild(entity);
        }
      );
    });
  }
}
pc.registerScript(PlaycanvasMicrocmsConnect);
PlaycanvasMicrocmsConnect.attributes.add("endpoint", {
  type: "string",
  default: "blog",
});
PlaycanvasMicrocmsConnect.attributes.add("limit", {
  type: "number",
  default: 10,
});
PlaycanvasMicrocmsConnect.attributes.add("offset", {
  type: "number",
  default: 0,
});
PlaycanvasMicrocmsConnect.attributes.add("orders", {
  type: "string",
  default: ["publishedAt"],
  array: true,
});

```
##### スクリプト属性にてエンドポイントを設定
スクリプト属性の`endpoint`の値を自身のエンドポイントの値に書き換えます。
必要に応じてlimitやoffsetなどのオプションも変更してください。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/40032827-2dad-874d-732a-0f8e5c379d13.png)


#### PlayCanvas上で`Launch`をして確認 
この状態でPlayCanvasの表示を確認してみます。現在4件のレコードが設定されておりそれぞれにポジションが決められております。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/84eebf26-c10c-2746-0ef4-978b25b41b88.png)

### microCSM上で座標を変えて`Launch`を確認
microCMS上でモデルの座標を変更してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/4d1babdd-8bed-3915-121a-c38bcbf05eba.png)

座標の変更後再度`Launch`をするとモデルの位置が変わっていることが分かります。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/87b1e8fc-7576-6325-f8dd-cd965ba9f439.png)