ARでサイコロを投げるまで ～Blenderを使って３Ｄモデルの作成~JavaScriptでサイコロを動かす～[PlayCanvas / 8th Wall]

# はじめに
![kotowaza_hato_mamedeppou](https://user-images.githubusercontent.com/39250588/67912820-097d3980-fb83-11e9-94c4-54ef5f7d6170.png)

前回の記事の続きになります。「[PlayCanvas 入門- モデルの作成～ゲームに入れ込むまで](https://qiita.com/yushimatenjin/items/2a2c35fe7b1d08f9e361)」

# <font color="OrangeRed">**8th Wallとは**</font>
[8th Wall ](https://www.8thwall.com/)というARのライブラリ / プラットフォームをご存知でしょうか？これは、WebARを簡単に行う事ができるようになるもので、世界初のモバイルWeb用のARプラットフォームです。
表面の検出や照明の検出が出来る マーカレス・任意の画像をマーカーとして 使用すること可能です。


## <font color="OrangeRed">**8th Wallで作れるコンテンツ**</font>
サンプル集はGitHubに存在していますが、マーカを使った面白い表現や、オフィス木を生やしたりと面白い表現がいくつかあります。

[https://github.com/8thwall/web](https://github.com/8thwall/web)

![8thwalldemo.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/f067a19a-4ffd-5554-7fe9-fefb8f58377a.png)

<iframe width="560" height="315" src="https://www.youtube.com/embed/G-5ealr3Zi0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

[8th Wall - Products](https://www.8thwall.com/products)をみると各種3D系のフレームワークに対応をしており、

- A-Frame
- three.js
- babylon.js
- Amazon Sumerian
- PlayCanvas

に対応しております。


その中でも今回はPlayCanvasと8th Wallを使ってARのコンテンツを出すための手順を紹介します。

# サイコロのモデルを作る


作るもの


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">WebARの利点<br> - 花壇でサイコロを投げることが出来る<a href="https://twitter.com/hashtag/playcanvas?src=hash&amp;ref_src=twsrc%5Etfw">#playcanvas</a> <a href="https://twitter.com/hashtag/8thwall?src=hash&amp;ref_src=twsrc%5Etfw">#8thwall</a> <a href="https://t.co/uzQ6TGpQM9">pic.twitter.com/uzQ6TGpQM9</a></p>&mdash; はが (@Mxcn3) <a href="https://twitter.com/Mxcn3/status/1189389334434074624?ref_src=twsrc%5Etfw">October 30, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


## Blenderを使用してサイコロのfbxのモデルを作る
Blender 2.8を使用しています。Blenderのダウンロードは [公式サイト](https://www.blender.org/) からできます。
ダウンロードできない方は[dice.fbx](https://drive.google.com/file/d/1RFpkPTa7dozFHXiV7b4w1aVPqoSn1ZkH/view?usp=sharing)← ここにサイコロのモデルがあります（自由に利用してください）。

#### Blenderを開く
![1](https://user-images.githubusercontent.com/39250588/67998751-84148a80-fc51-11e9-8e0b-059fbf8d9fde.PNG)

#### マテリアルを選択

![2](https://user-images.githubusercontent.com/39250588/67999876-dd7eb880-fc55-11e9-9767-1ee817c9b41c.png)
1. UV Editorを選択
2. マテリアルを選択


#### 画像テクスチャを追加

![3](https://user-images.githubusercontent.com/39250588/67999726-5af5f900-fc55-11e9-8c84-44eb3b15e8f8.png)
1. ベースカラーの`○`を選択
2. 画像テクスチャを選択

![3-1](https://user-images.githubusercontent.com/39250588/67999727-5b8e8f80-fc55-11e9-9f7c-e6f49cea2493.png)
3. 新規を選択

#### UV展開の図をエクスポートする

![4](https://user-images.githubusercontent.com/39250588/67999728-5b8e8f80-fc55-11e9-82e6-98bd0b91fa2a.png)


![4-1](https://user-images.githubusercontent.com/39250588/67999729-5b8e8f80-fc55-11e9-8ef2-856d6a015b6b.png)

- `A`またはマウスカーソルを使って全選択


![5](https://user-images.githubusercontent.com/39250588/67999730-5b8e8f80-fc55-11e9-8883-92b615e03ef1.png)

- UV Editing → UV
- UV配置をエクスポート

#### UV配置にサイコロの絵柄を入れる

![6](https://user-images.githubusercontent.com/39250588/67999731-5b8e8f80-fc55-11e9-8288-8a5b2c0efafb.png)



![7](https://user-images.githubusercontent.com/39250588/67999733-5c272600-fc55-11e9-9dee-e5a5bb4ebd2f.png)

- ペイントなどのソフトで展開図を開く、今回は`Figma`を使用します。

- 絵柄を入れていきます

![8](https://user-images.githubusercontent.com/39250588/67999734-5c272600-fc55-11e9-9aa8-b8585285be06.png)

- 
- 1～6の目を入れます
pngなどでエクスポートする場合には元の展開図の灰色の背景と線は消しておきます。


#### Blenderに戻りテクスチャをドラッグ・アンド・ドロップ


![D_D](https://user-images.githubusercontent.com/39250588/67999757-5f221680-fc55-11e9-852a-326e19be9730.PNG)

作成したUV展開された絵柄をBlenderのUV Editingの画面にドラッグ・アンド・ドロップします。

#### 3Dビューのシェーディングをレンダープレビューかルック開発モードに変更します

![9](https://user-images.githubusercontent.com/39250588/67999735-5c272600-fc55-11e9-9992-98d8dae1b19d.png)


#### マテリアルの画面でテクスチャをエクスポートをしたサイコロの絵柄に変更します

![10](https://user-images.githubusercontent.com/39250588/67999736-5cbfbc80-fc55-11e9-9cfc-8aaa37e90510.png)


#### サイコロの絵柄が表示されます

![11](https://user-images.githubusercontent.com/39250588/67999737-5cbfbc80-fc55-11e9-8bb4-60dc3176adc5.png)


## FBXでエクスポート

![12](https://user-images.githubusercontent.com/39250588/67999738-5cbfbc80-fc55-11e9-9948-1b795f58b181.png)


- 作成したモデルを`オブジェクトモード`の状態で全選択(`Aキー`)をしてエクスポートをします。
  
![pathmode](https://user-images.githubusercontent.com/39250588/67999758-5f221680-fc55-11e9-9a69-ccdd90001772.PNG)

PlayCanvas上に、エクスポートを時のオプションを選択は`選択したオブジェクト`にチェックを入れるのと、`パスモ...`をコピーにし、`パスモ...`の`右のアイコンをアクティブ`にします。

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


![13](https://user-images.githubusercontent.com/39250588/67999740-5cbfbc80-fc55-11e9-82ee-56583daa8626.png)


[https://playcanvas.com/project/631719/overview/ar-world-tracking-starter-kit](https://playcanvas.com/project/631719/overview/ar-world-tracking-starter-kit)
8th Wallというライブラリのテンプレートとなるプロジェクトがありますのでそちらを`Fork`します。




![14](https://user-images.githubusercontent.com/39250588/67999742-5d585300-fc55-11e9-8645-85e061f397ec.png)

Forkをしたら`Editor`から開発画面に入ります。


![15](https://user-images.githubusercontent.com/39250588/67999743-5d585300-fc55-11e9-8451-88673715f6db.png)

`WorkdTrackingScene`を選択します

#### PlayCanvasのプロジェクトが開かれるので8th WallのAPIキーを入れ込む

![16](https://user-images.githubusercontent.com/39250588/67999744-5d585300-fc55-11e9-9954-512c0b2033c8.png)

![2](https://user-images.githubusercontent.com/39250588/67825574-ad9eac00-fac1-11e9-92c0-113595320975.png)


- PlayCanvasのSettings → External Scriptsの設定から`????`となっている部分に8th WallのダッシュボードからAPIを取得したものを記入

- [8th Wall](https://www.8thwall.com)

![apikey](https://user-images.githubusercontent.com/39250588/67827246-54d21200-fac7-11e9-9e74-ec107c58f2c5.png)


## 作成したFBXのモデルをドラッグ・アンド・ドロップ

![18](https://user-images.githubusercontent.com/39250588/67999746-5d585300-fc55-11e9-8bff-5d41695830e7.png)

アップロードしたfbxのモデルが`json`, `テクスチャ`,`マテリアル`として展開されます。

![19](https://user-images.githubusercontent.com/39250588/67999747-5df0e980-fc55-11e9-8611-824719e2579a.png)

`.json`をゲーム画面にアップロードします。




## サイコロに物理演算を加える

![222](https://user-images.githubusercontent.com/39250588/68000856-a1e5ed80-fc59-11e9-8bc0-25b241572182.png)

サイコロに Rigid Body と Collision を追加します


#### 1. RIGID BODY を追加する

追加したサイコロのモデルを選択します。そのモデルに対して「ADD COMPONENTS → RIGID BODY」を追加します。その後 RIGID BODY のタイプを`Dynamic`にします。

RIGID BODY のタイプには 3 種類あります

|種類| 説明|
|---|---|
|Dynamic| 重力影響を受ける|
|Kinematic| プログラムで制御される（重力の影響を受けない）|
|Static| 動かないけど衝突がする|

3 つのタイプがあります。

#### 2. COLLISION を追加する

ADD COMPONENTS → 　 COLLISION を選択　 → 　 Mesh を選択　 → 　 ASSETS 欄から`モデル名.json`を追加します。

## 透明な床を追加する


![21](https://user-images.githubusercontent.com/39250588/67999749-5df0e980-fc55-11e9-95c1-0f3228e0a482.png)


床に対しても同様にRIGID BODYとCOLLISIONを追加します。
- `RIGID BODY`と`COLLISION`


### 床を透明にする
![22](https://user-images.githubusercontent.com/39250588/67999750-5df0e980-fc55-11e9-8fde-027c9eff64f8.png)

床を透明にするために`MODEL`を`OFF`にします。




## スクリプトを書き換える

- 物理演算を加える
- サイコロを指定

`taprecent.js`にこの２つの要素追加します。

### エンティティを選択

![23](https://user-images.githubusercontent.com/39250588/67999751-5e898000-fc55-11e9-9b05-eb4bf7b22729.png)

- `XRController`エンティティを選択します
- `SCRIPT`から`Edit`を選択
![24](https://user-images.githubusercontent.com/39250588/67999752-5e898000-fc55-11e9-988d-624239f2a50e.png)


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

// taprecenter.js: Defines a playcanvas script that re-centers the AR scene when the screen is
// tapped.

const taprecenter = pc.createScript("taprecenter");
taprecenter.attributes.add("dice", { type: "entity" });

// Fire a 'recenter' event to move the camera back to its starting location in the scene.
taprecenter.prototype.initialize = function() {
  this.app.touch.on(pc.EVENT_TOUCHSTART, event => {
    if (event.touches.length !== 1) {
      return;
    }
    this.dice.rigidbody.teleport(0, 5, 0);
    this.dice.rigidbody.applyTorque(
      Math.random() * 10,
      Math.random() * 10,
      Math.random() * 10
    );
    this.app.fire("xr:recenter");
  });
};
```

こちらに書き換えます。

### PlayCanvas Editorに戻る

![26](https://user-images.githubusercontent.com/39250588/67999754-5e898000-fc55-11e9-8e09-b0819aef34ce.png)

PlayCanvas Editorの方へ戻り、SCRIPT　→　`taprecenter`の　`EDIT`の横にある ♻のようなマークの`Paser`ボタンをクリックします。


### 追加したスクリプトについて

```javascript
taprecenter.attributes.add("dice", { type: "entity" });
```
`dice`というエンティティというタイプの属性を追加しています

[スクリプト属性 | Learn PlayCanvas](https://developer.playcanvas.com/ja/user-manual/scripting/script-attributes/)


#### タップされたときの挙動について

this.app.touch.on(イベント名)でタッチされたときのイベントを登録しています。他にもキーボード(this.app.keyboard.on)、マウス(this.app.mouse.on)などでも同様なことができます。

```javascript
this.app.touch.on(pc.EVENT_TOUCHSTART, event => {
    関数....
});
```

##### y軸の座標を5に移動
```javascript
this.dice.rigidbody.teleport(0, 5, 0);
```

#### トルクをランダムに追加しています
```javascript
this.dice.rigidbody.applyTorque(
    Math.random() * 10,
    Math.random() * 10,
    Math.random() * 10
);
```

[ForceとImpulse | Learn PlayCanvas](https://developer.playcanvas.com/ja/tutorials/Using-forces-on-rigid-bodies/)





### サイコロの大きさを変更して起動
![28](https://user-images.githubusercontent.com/39250588/67999756-5f221680-fc55-11e9-9a71-7ae0c0ec60a5.PNG)

この状態で起動をするとQRコードが開かれますのでそのQRコードを読み込むことでARで遊ぶことができます。



<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">WebARの利点<br> - 花壇でサイコロを投げることが出来る<a href="https://twitter.com/hashtag/playcanvas?src=hash&amp;ref_src=twsrc%5Etfw">#playcanvas</a> <a href="https://twitter.com/hashtag/8thwall?src=hash&amp;ref_src=twsrc%5Etfw">#8thwall</a> <a href="https://t.co/uzQ6TGpQM9">pic.twitter.com/uzQ6TGpQM9</a></p>&mdash; はが (@Mxcn3) <a href="https://twitter.com/Mxcn3/status/1189389334434074624?ref_src=twsrc%5Etfw">October 30, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


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