このセクションの記事

もっと見る

【3-2-1】3D空間のUIについて - ホットスポットを追加しよう

Avatar
羽賀 流登
  • 更新
フォローする

7.gif

2.png

3-2-1 完成図ホット・スポット

 

3D空間でクリックできるホットスポットを追加する

3-1ではモデルを追加してエンテティの動きを制御することができました。3-2からはモデルを展示物に見立てて、3D空間のUIを作成していきます。まずは、ホットスポットとしてモデルの付近をクリックできるようにしていきます。ホットスポットについてはPlayCanvasでチュートリアルがあります。

今回のハンズオン以外の利用では3Dのモデルビューワーの中での利用例がチュートリアルとして紹介されています。またこちらのチュートリアルのスクリプトについては、MITライセンスで公開されています。 https://developer.playcanvas.com/ja/tutorials/information-hotspots/

テンプレート

テンプレート

3.png

◇のマークのアイコンはタイプがテンプレートのアセットとなります。 テンプレートのアセットを利用することで同じエンテティを再利用する際に効率的に再利用することができます。

1. Hotspotを土台に設置する

4.png

Hotspotを土台（左）にドラッグアンドドロップします。

2. テンプレートのインスタンスがシーンに追加される

5.png

ドラックアンドドロップしたものはテンプレートと呼ばれ、モデルとは違い、テンプレート保持しているコンポーネントの状態などをそのままコピーすることができます。Hotspot.jsが設定された状態で追加されました。

3. 残りのモデルにもホットスポットを設定する

6.png

同じ方法で、中央と、右の土台にもホットスポットを追加します。 これで、3-2-1で行う設定は終わりです。

HotspotエンテティははBUTTONコンポーネントとELEMENTコンポーネントを持つエンテティです。2D Screen上にクリック出来るエンテティを作ることができます。

1. BUTTONコンポーネント ボタンコンポーネントを使うことで、ELEMENTコンポーネントにボタンの振る舞いを追加することができます。ホバーをされた際に色を変えることやテクスチャを変更することができます。 https://developer.playcanvas.com/en/user-manual/packs/components/button/2. ELEMENTコンポーネント 2DScreen上で要素表示するための基本的なコンポーネントになります。画像や文字の表示などを行うことができます。 また、クリックをする処理などをスクリプトから追加する場合やBUTTONコンポーネントを使用する場合には、USE INPUTにチェックを入れる必要があります。 https://developer.playcanvas.com/en/user-manual/packs/components/element/

hotspot.jsについて

1.gif

マウスのホバーがされると、大きさが変化するスクリプトが追加されています。 hotspot.jsのSCRIPTファイルの中身についてはこちらになります。tween.jsというライブラリを使っています。

/*jshint esversion: 6, asi: true, laxbreak: true*/
class Hotspot extends pc.ScriptType {
  initialize () {
    const tween = this.entity.tween(this.entity.getLocalScale()).to(new pc.Vec3(1.1, 1.1, 1.1), this.duration, pc.Linear).loop(true).yoyo(true)
    const tween2 = this.entity.tween(this.entity.getLocalScale()).to(new pc.Vec3(1, 1, 1), this.duration, pc.Linear).loop(false).yoyo(false)
    this.entity.button.on('hoverstart', () => {
      tween.start()
    })
    this.entity.button.on('hoverend', () => {
      tween.stop()
      tween2.start()
    })
  }
}
pc.registerScript(Hotspot)
Hotspot.attributes.add('duration', { type: 'number', default: 0.5 })

スクリプト: initialize

  initialize () {
    const tween = this.entity.tween(this.entity.getLocalScale()).to(new pc.Vec3(1.1, 1.1, 1.1), this.duration, pc.Linear).loop(true).yoyo(true)
    const tween2 = this.entity.tween(this.entity.getLocalScale()).to(new pc.Vec3(1, 1, 1), this.duration, pc.Linear).loop(false).yoyo(false)
    this.entity.button.on('hoverstart', () => {
      tween.start()
    })
    this.entity.button.on('hoverend', () => {
      tween.stop()
      tween2.start()
    })
  }
  • this.entity.button.on
  • this.entity.tween

a.this.entity.button.on

起動時、マウスホバーに対するイベントリスナーを追加しています。 マウスホバーがあった場合に、スケールをtween関数を実行しています。

b. this.entity.tween

tween.jsを使用して、マウスホバーがあった場合には、大きさを1.1倍にし、マウスのホバーが戻った場合にはエンテティの大きさをもとの大きさに戻しています。

this.entity.tweenについてはライブラリをPlayCanvasに追加することで使えるようになります。

tween.jsについて

8.gif

tween.jsはPlayCanvasで移動や回転を制御する際に便利なライブラリです。

https://developer.playcanvas.com/en/tutorials/tweening/

https://github.com/playcanvas/playcanvas-tween

 

チュートリアル - PlayCanvasを使ってブラウザ上で動くオンラインの展示会場を作ろう！

関連記事

コメント

0件のコメント

サインインしてコメントを残してください。