PlayCanvas x tween.jsを使って押された画像の位置にカメラを移動させる

PlayCanvasとTween.jsを使用して、設置したピンが押されたときにピンの位置にカメラを移動させます。


まず実行結果はこちらになります。
![](https://i.imgur.com/FnYDRsp.gif)

（ブラウザで実行できます）
https://playcanv.as/p/ZsHC33Oc/


Tween.jsについてはこちらを使用しています。使用する場合には、こちらから`tween.js`をダウンロードし、プロジェクトに追加してください。
https://github.com/playcanvas/playcanvas-tween

### ピンを設置
![](https://i.imgur.com/BKjP7i0.png)
こちらがPlayCanvasのプロジェクトです。このプロジェクトはCameraにはFlyCameraの設定がされているプロジェクトになります。

https://playcanvas.com/editor/project/724912


- Elementコンポーネント
- Buttonコンポーネント
- Scriptコンポーネント
この3つのコンポーネントを持ったエンテティを作成します。


#### Elementコンポーネント
![](https://i.imgur.com/pZExBgi.png)

Elementコンポーネントを追加し設定を行います。今回は、マウスでクリックされた際にボタンの反応をさせるために`Use Input`にチェックを入れます。
1. 画面上にピンとして表示させたい画像をElementコンポーネントの`Texture`に設定
2. `Width`, `Height`の大きさを設定（画像をアップロードした場合、そのままテクスチャの解像度が設定されますのでそちらを表示させたい大きさに変更)
3. `Use Input`を有効にする




#### Buttonコンポーネント
![](https://i.imgur.com/8wb7Yyy.png)
Buttonコンポーネントの設定をします。HoverやPressedのTint Colorをここで設定することができます。

1. `Image`プロパティに自身のエンテティを設定します。

#### Scriptコンポーネント
![](https://i.imgur.com/zQUufKk.png)


下記の`pin.js`、を適用し、`ピンがクリックされた際に移動`、`常にカメラを向き続ける処理`の機能を追加します。

1. `pin.js`を保存

```javascript
const Pin = pc.createScript('pin');
Pin.attributes.add("camera", {type: "entity"}) // CameraをAttributeとして設定

Pin.prototype.initialize = function() {
    //ボタンがクリックされたらthis.moveの関数を呼び出す
    this.entity.button.on(pc.EVENT_MOUSEUP, this.move, this)
    this.entity.button.on(pc.EVENT_TOUCHSTART, this.move, this)
};

Pin.prototype.move = function(){
    //tweenを使用してカメラを移動させる
    const {x, y, z} = this.entity.getPosition().scale(1.2) //ピンの位置を取得
    const cameraPosition = this.camera.getLocalPosition() // カメラの位置を取得
    const tween  = this.camera.tween(cameraPosition).to({x, y: cameraPosition.y, z},  2, pc.QuinticIn) // カメラの位置からピンの位置へ移動
    tween.start() // tween開始
}
Pin.prototype.update = function() {
    this.entity.lookAt(this.camera.getPosition()); // ピンを常にカメラを向き続ける
    this.entity.rotateLocal(0, 180, 0); // LookAtでは逆向きになっているので反転させる
}

```

2. Parseボタンをクリックしスクリプトの更新をします
3. cameraの`Attributes`に移動させるカメラを追加します。

このような形でクリックされた場所にカメラを移動させることができます。

![](https://i.imgur.com/8EiqM2g.gif)
https://playcanv.as/p/ZsHC33Oc/

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